/* Bobby McKey's Dividers — "The Request Pile" (napkins) + "Hands Up" (crowd). Built by mckeys-dividers.js. Markup is printed by the [mckeys_divider] shortcode. Colours: no pure black or white anywhere; reds are the house #990400 / #E7535D family. */ /* ---- self-hosted handwriting faces (woff2 subsets: only the glyphs the napkins use) ---- */ @font-face { font-family: "MKD Caveat"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/caveat.woff2") format("woff2"); } @font-face { font-family: "MKD Kalam"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/kalam.woff2") format("woff2"); } @font-face { font-family: "MKD Permanent Marker"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/permanent-marker.woff2") format("woff2"); } @font-face { font-family: "MKD Reenie Beanie"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/reenie-beanie.woff2") format("woff2"); } @font-face { font-family: "MKD Nothing You Could Do"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/nothing-you-could-do.woff2") format("woff2"); } @font-face { font-family: "MKD Cedarville Cursive"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/cedarville-cursive.woff2") format("woff2"); } @font-face { font-family: "MKD Shadows Into Light"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/shadows-into-light.woff2") format("woff2"); } @font-face { font-family: "MKD Gochi Hand"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/gochi-hand.woff2") format("woff2"); } @font-face { font-family: "MKD Covered By Your Grace"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/covered-by-your-grace.woff2") format("woff2"); } /* ---- host (both styles) ------------------------------------------------------------- */ .mckeys-divider { --mkd-height: clamp(112px, 12vw, 200px); position: relative; height: var(--mkd-height); margin: -1px 0; /* hide hairline seams between rows */ pointer-events: none; overflow-x: clip; /* never a horizontal scrollbar */ overflow-y: visible; /* napkins / raised arms spill into both neighbours */ z-index: 2; } .mckeys-divider--crowd { --mkd-height: clamp(84px, 12vw, 180px); } /* Overlap mode: the divider sits over the bottom of the section above; the host stays transparent so that section (a hero photo) shows through the top half / between the arms. */ .mckeys-divider[data-overlap="1"] { margin: calc(-1 * var(--mkd-height)) 0 -1px; background: transparent !important; } /* The divider's own WPBakery row: edge to edge, no spacing, content floats over both neighbours. The shortcode's row gets .mckeys-divider-row; the :has() fallback catches a bare divider in any row. .ss-smile-edge-row is kept so rows cloned from the Smiles site keep working. */ .mckeys-divider-row, .ss-smile-edge-row, .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .mckeys-divider:only-child) { position: relative; z-index: 3; padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; border: 0 !important; background: none !important; overflow: visible !important; } :is(.mckeys-divider-row, .ss-smile-edge-row, .vc_row:has(> .wpb_column > .vc_column-inner > .wpb_wrapper > .mckeys-divider:only-child)) :is(.wpb_column, .vc_column-inner, .wpb_wrapper) { padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; overflow: visible !important; } :is(.mckeys-divider-row, .ss-smile-edge-row) + .vc_row { border-top: 0 !important; } .vc_row:has(+ :is(.mckeys-divider-row, .ss-smile-edge-row)) { border-bottom: 0 !important; } /* ===================================================================================== Style: NAPKINS — "The Request Pile" ===================================================================================== */ .mckeys-divider--napkins { --ne-paper-1: #F6F1E6; --ne-paper-2: #F2ECDF; --ne-paper-3: #EFE7D7; --ne-ink-blue: #233F8F; --ne-ink-black: #2A2522; --ne-ink-red: #B3261E; --ne-ink-plum: #6E1C27; } .mckeys-divider__fill { /* the "to" colour from the seam down */ position: absolute; left: 0; right: 0; top: 50%; bottom: -1px; /* bleed 1px into the section below: no seam */ } .mckeys-divider[data-overlap="1"] .mckeys-divider__fill { bottom: -2px; } .nk { /* one napkin */ position: absolute; box-sizing: border-box; border-radius: 4px; background-color: var(--ne-paper-1); background-image: linear-gradient(155deg, rgba(255, 252, 245, .55) 0%, rgba(255, 252, 245, 0) 38%, rgba(96, 70, 40, .07) 100%), url("data:image/svg+xml;utf8,"); background-size: 100% 100%, 120px 120px; box-shadow: inset 0 0 0 1px rgba(255, 252, 245, .5), 0 1px 1px rgba(32, 16, 18, .18), 0 4px 7px rgba(32, 16, 18, .22), 0 14px 22px -8px rgba(32, 16, 18, .38); transform-origin: 50% 50%; will-change: transform, opacity; overflow: hidden; contain: layout paint; color: var(--ne-ink-black); } .nk--p2 { background-color: var(--ne-paper-2); } .nk--p3 { background-color: var(--ne-paper-3); } .nk::before { /* embossed border a little in from the edge */ content: ""; position: absolute; inset: 6.5%; border-radius: 3px; border: 1px solid rgba(92, 66, 40, .13); box-shadow: inset 0 0 0 1px rgba(255, 252, 245, .6), 0 0 0 1px rgba(255, 252, 245, .55); pointer-events: none; } .nk--quilt::before { border-style: dotted; border-width: 2px; border-color: rgba(92, 66, 40, .12); } .nk--crease::after { /* fold crease */ content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; background: linear-gradient(90deg, rgba(96, 70, 40, .10), rgba(255, 252, 245, .7) 60%, rgba(96, 70, 40, 0)); pointer-events: none; } .nk--crease-h::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; background: linear-gradient(180deg, rgba(96, 70, 40, .10), rgba(255, 252, 245, .7) 60%, rgba(96, 70, 40, 0)); pointer-events: none; } .nk__ring { /* highball ring */ position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(140, 86, 28, 0) 54%, rgba(140, 86, 28, .10) 57%, rgba(140, 86, 28, .22) 61%, rgba(140, 86, 28, .12) 64%, rgba(140, 86, 28, .05) 68%, rgba(140, 86, 28, 0) 71%); filter: blur(.4px); } .nk__ring--wine { background: radial-gradient(circle, rgba(94, 25, 34, 0) 55%, rgba(94, 25, 34, .09) 58%, rgba(94, 25, 34, .20) 62%, rgba(94, 25, 34, .10) 65%, rgba(94, 25, 34, .04) 69%, rgba(94, 25, 34, 0) 72%); } .nk__mark { position: absolute; width: 16%; height: 16%; pointer-events: none; opacity: .92; } .nk__ink { /* the handwriting */ position: absolute; left: 9%; right: 9%; top: 50%; transform: translateY(-50%) rotate(var(--ink-rot, 0deg)); text-align: center; line-height: 1.02; overflow-wrap: normal; -webkit-font-smoothing: antialiased; text-transform: none; letter-spacing: 0; } .nk__ink > .t { display: inline-block; position: relative; } .f-caveat { font-family: "MKD Caveat", "Caveat", cursive; font-weight: 700; } .f-kalam { font-family: "MKD Kalam", "Kalam", cursive; } .f-marker { font-family: "MKD Permanent Marker", "Permanent Marker", cursive; letter-spacing: -.01em; } .f-reenie { font-family: "MKD Reenie Beanie", "Reenie Beanie", cursive; } .f-nothing { font-family: "MKD Nothing You Could Do", "Nothing You Could Do", cursive; } .f-cedarville { font-family: "MKD Cedarville Cursive", "Cedarville Cursive", cursive; } .f-shadows { font-family: "MKD Shadows Into Light", "Shadows Into Light", cursive; } .f-gochi { font-family: "MKD Gochi Hand", "Gochi Hand", cursive; } .f-covered { font-family: "MKD Covered By Your Grace", "Covered By Your Grace", cursive; } .ink-blue { color: var(--ne-ink-blue); } .ink-black { color: var(--ne-ink-black); text-shadow: 0 0 .5px currentColor; } .ink-red { color: var(--ne-ink-red); } .ink-plum { color: var(--ne-ink-plum); } .ink-blue .t, .ink-plum .t { opacity: .92; } /* ballpoint is never fully opaque */ .nk__scrawl { /* underlines, circles, arrows... drawn in the current ink */ position: absolute; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .nk__scrawl--under { left: -2%; right: -2%; width: 104%; height: .34em; bottom: -.3em; } .nk__scrawl--circle { left: -14%; top: -22%; width: 128%; height: 144%; } .nk__scrawl--arrow { right: -1.25em; bottom: -.55em; width: 1.2em; height: 1em; } .nk__scrawl--heart { display: inline-block; position: static; width: .8em; height: .8em; vertical-align: -.1em; margin-left: .12em; fill: currentColor; stroke: none; } .nk__scrawl--star { left: -.95em; top: -.6em; width: .9em; height: .9em; } .nk__scrawl--strike { left: -3%; top: 0; width: 106%; height: 100%; stroke-width: 2.6; } .nk .x { position: relative; display: inline-block; } .nk .bang { font-weight: 700; } /* ===================================================================================== Style: CROWD — "Hands Up" ===================================================================================== */ .mckeys-divider__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .mckeys-divider[data-overlap="1"] .mckeys-divider__svg { height: calc(100% + 2px); } /* bleed 2px into the section below */ /* Phone flashlights breathe a little once they are up (cosmetic, time-based). */ .mckeys-divider__lights { animation: mkd-breathe 2.8s ease-in-out infinite alternate; } @keyframes mkd-breathe { from { opacity: .84; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mckeys-divider__lights { animation: none; } .nk { will-change: auto; } }