.wp-block-paragraph.is-style-error,.wp-block-paragraph.is-style-info,.wp-block-paragraph.is-style-success,.wp-block-paragraph.is-style-warning,p.is-style-error,p.is-style-info,p.is-style-success,p.is-style-warning{border-radius:4px;box-sizing:border-box;padding:32px}.wp-block-paragraph.is-style-error.coblocks-alert-paragraph,.wp-block-paragraph.is-style-info.coblocks-alert-paragraph,.wp-block-paragraph.is-style-success.coblocks-alert-paragraph,.wp-block-paragraph.is-style-warning.coblocks-alert-paragraph,p.is-style-error.coblocks-alert-paragraph,p.is-style-info.coblocks-alert-paragraph,p.is-style-success.coblocks-alert-paragraph,p.is-style-warning.coblocks-alert-paragraph{margin-bottom:var(--go--spacing--vertical);margin-top:var(--go--spacing--vertical)}.wp-block-paragraph:not(.has-background).is-style-info,p:not(.has-background).is-style-info{background-color:#d6efee}.wp-block-paragraph:not(.has-background).is-style-warning,p:not(.has-background).is-style-warning{background-color:#fbe7dd}.wp-block-paragraph:not(.has-background).is-style-error,p:not(.has-background).is-style-error{background-color:#ffdede}.wp-block-paragraph:not(.has-background).is-style-success,p:not(.has-background).is-style-success{background-color:#d0eac4}.wp-block-paragraph:not(.has-text-color).is-style-info,p:not(.has-text-color).is-style-info{color:#094264}.wp-block-paragraph:not(.has-text-color).is-style-warning,p:not(.has-text-color).is-style-warning{color:#8a4b30}.wp-block-paragraph:not(.has-text-color).is-style-error,p:not(.has-text-color).is-style-error{color:#8b343c}.wp-block-paragraph:not(.has-text-color).is-style-success,p:not(.has-text-color).is-style-success{color:#154a28} .wp-block-image.is-style-bottom-wave img{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-position:bottom;mask-position:bottom}.wp-block-image.is-style-bottom-wave img,.wp-block-image.is-style-top-wave img{-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover}.wp-block-image.is-style-top-wave img{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-position:top;mask-position:top}.block-editor-block-styles__item-preview .wp-block-image{margin-top:0}.block-editor-block-styles__item-preview .wp-block-image .components-resizable-box__container{height:100%!important;width:100%!important} .wp-block-cover:not(.components-placeholder):not(.is-placeholder).is-style-bottom-wave{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-position:bottom;mask-position:bottom;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover}.wp-block-cover:not(.components-placeholder):not(.is-placeholder).is-style-top-wave{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,");-webkit-mask-position:top;mask-position:top;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:cover;mask-size:cover} :root{--coblocks-spacing--0:0;--coblocks-spacing--1:0.5em;--coblocks-spacing--2:1em;--coblocks-spacing--3:1.5em;--coblocks-spacing--4:2em;--coblocks-spacing--5:2.5em;--coblocks-spacing--6:3em;--coblocks-spacing--7:3.5em;--coblocks-spacing--8:4em;--coblocks-spacing--9:4.5em;--coblocks-spacing--10:7em}.wp-block-media-text.is-style-card .wp-block-media-text__content{background-color:var(--wp--preset--color--background,#fff);margin-left:auto;margin-right:auto;margin-top:calc(var(--coblocks-spacing--8, 4em)*-1);padding:var(--coblocks-spacing--4,2em);width:95%}@media(min-width:600px){.wp-block-media-text.is-style-card .wp-block-media-text__content{margin-left:0;margin-right:0;margin-top:0;padding:calc(var(--coblocks-spacing--3, 1.5em)*2);right:1px;width:auto}}@media(min-width:960px){.wp-block-media-text.is-style-card .wp-block-media-text__content{padding:calc(var(--coblocks-spacing--6, 3em)*2)}}.wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__content{margin-bottom:calc(var(--coblocks-spacing--8, 4em)*-1);margin-top:0}@media(min-width:600px){.wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__content{margin-bottom:0}}.wp-block-media-text.is-style-overlap .wp-block-media-text__content{margin-left:auto;margin-right:auto;margin-top:calc(var(--coblocks-spacing--4, 2em)*-1);width:90%}@media(min-width:600px){.wp-block-media-text.is-style-overlap .wp-block-media-text__content{margin-left:0;margin-left:calc(var(--coblocks-spacing--8, 4em)*-1);margin-right:0;margin-top:0;width:auto}}@media(min-width:960px){.wp-block-media-text.is-style-overlap .wp-block-media-text__content{margin-left:calc(var(--coblocks-spacing--10, 7em)*-2)}}.wp-block-media-text.is-style-overlap.has-media-on-the-right .wp-block-media-text__content{margin-left:0;margin-right:0;margin-top:0;width:auto}@media(min-width:600px){.wp-block-media-text.is-style-overlap.has-media-on-the-right .wp-block-media-text__content{margin-left:0;margin-right:calc(var(--coblocks-spacing--8, 4em)*-1);width:175%}}@media(min-width:960px){.wp-block-media-text.is-style-overlap.has-media-on-the-right .wp-block-media-text__content{margin-right:calc(var(--coblocks-spacing--10, 7em)*-2)}}@media(min-width:600px){.wp-block-media-text.is-style-card .wp-block-media-text__content,.wp-block-media-text.is-style-outline .wp-block-media-text__content{margin-left:calc(var(--coblocks-spacing--10, 7em)*-1)}.wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__content,.wp-block-media-text.is-style-outline.has-media-on-the-right .wp-block-media-text__content{margin-left:0;margin-right:calc(var(--coblocks-spacing--10, 7em)*-1)}}.wp-block-media-text.is-style-outline .wp-block-media-text__content{margin-left:auto;margin-right:auto;width:90%}@media(min-width:600px){.wp-block-media-text.is-style-outline .wp-block-media-text__content{margin-left:calc(var(--coblocks-spacing--10, 7em)*-1);margin-right:inherit;margin-top:inherit;width:auto}}.wp-block-media-text.is-style-outline .wp-block-media-text__content h1,.wp-block-media-text.is-style-outline .wp-block-media-text__content h2,.wp-block-media-text.is-style-outline .wp-block-media-text__content h3,.wp-block-media-text.is-style-outline .wp-block-media-text__content h4,.wp-block-media-text.is-style-outline .wp-block-media-text__content h5,.wp-block-media-text.is-style-outline .wp-block-media-text__content h6,.wp-block-media-text.is-style-outline .wp-block-media-text__content p{background-color:var(--wp--preset--color--background,#fff);box-shadow:.5rem 0 0 var(--wp--preset--color--background,#fff),-.5rem 0 0 var(--wp--preset--color--background,#fff);display:inline}.wp-block-media-text.is-style-outline .wp-block-media-text__content .wp-block-buttons{margin-top:var(--coblocks-spacing--5,2.5em)}.wp-block-media-text.is-style-outline.has-media-on-the-right .wp-block-media-text__content{width:100%}@media(min-width:600px){.wp-block-media-text.is-style-outline.has-media-on-the-right .wp-block-media-text__content{margin-left:.5rem;width:175%}}.wp-block-media-text .wp-block-media-text__content :first-child{margin-top:0}@media(min-width:600px){.editor-styles-wrapper .wp-block-media-text.is-style-card .wp-block-media-text__content{right:1px}.editor-styles-wrapper .wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__content{left:1px;right:auto}}.editor-styles-wrapper .wp-block-media-text.is-style-card .components-resizable-box__handle:after,.editor-styles-wrapper .wp-block-media-text.is-style-outline .components-resizable-box__handle:after,.editor-styles-wrapper .wp-block-media-text.is-style-overlap .components-resizable-box__handle:after{top:-8px}.editor-styles-wrapper .wp-block-media-text.is-style-card.is-selected .wp-block-media-text__media:after,.editor-styles-wrapper .wp-block-media-text.is-style-outline.is-selected .wp-block-media-text__media:after,.editor-styles-wrapper .wp-block-media-text.is-style-overlap.is-selected .wp-block-media-text__media:after{background:var(--wp-admin-theme-color,#007cba);border:2px solid #fff;border-radius:50%;bottom:-7px;content:"";cursor:inherit;display:block;height:15px;position:absolute;right:-8px;width:15px;z-index:9999}.editor-styles-wrapper .wp-block-media-text.is-style-card.has-media-on-the-right .wp-block-media-text__media:after,.editor-styles-wrapper .wp-block-media-text.is-style-outline.has-media-on-the-right .wp-block-media-text__media:after,.editor-styles-wrapper .wp-block-media-text.is-style-overlap.has-media-on-the-right .wp-block-media-text__media:after{left:-8px;right:inherit}.editor-styles-wrapper .wp-block-media-text.is-style-outline .wp-block-media-text__content .wp-block.wp-block-buttons{margin-top:var(--coblocks-spacing--5,2.5em)!important} :root{--coblocks-spacing--0:0;--coblocks-spacing--1:0.5em;--coblocks-spacing--2:1em;--coblocks-spacing--3:1.5em;--coblocks-spacing--4:2em;--coblocks-spacing--5:2.5em;--coblocks-spacing--6:3em;--coblocks-spacing--7:3.5em;--coblocks-spacing--8:4em;--coblocks-spacing--9:4.5em;--coblocks-spacing--10:7em}.is-style-checkbox li{list-style-type:none!important;padding-left:10px;position:relative}@media(min-width:600px){.is-style-checkbox li{padding-left:12px}}.is-style-checkbox li:before{background-color:currentColor;background-size:cover;content:"";display:inline-block;height:20px;left:-20px;-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHdpZHRoPSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjAgMTBjMCA1LjUyMjcyNzMtNC40NzcyNzI3IDEwLTEwIDEwLTUuNTIyNzI3MjcgMC0xMC00LjQ3NzI3MjctMTAtMTAgMC01LjUyMjcyNzI3IDQuNDc3MjcyNzMtMTAgMTAtMTAgNS41MjI3MjczIDAgMTAgNC40NzcyNzI3MyAxMCAxMHptLTUuMjgwOTA5MS00LjIyNzI3MjczYy4yMDEwMDk4LS4yMDgzMjczNy40OTM2NjM5LS4zMDA5OTc5Mi43Nzc5NDg5LS4yNDYzNDE4NHMuNTIxNzEyMy4yNDkyMzkwNS42MzExNDIuNTE3MjUwOTNjLjEzODE1MzQuMzI5NzUwNzMuMDYxNDQ3MS43MTA0MDEtLjE5MzYzNjMuOTYwOTA5MDlsLTYuODgwMDAwMDUgNi45NDQ1NDU0NWMtLjMwNTIyMzczLjMwNzY4ODQtLjc5MjQ0OTgzLjMzODE2NDQtMS4xMzM2MzYzNi4wNzA5MDkxbC0zLjc4NDU0NTQ1LTIuOTUxODE4MmMtLjI0MjY4MjI3LS4xOTEyMTE4LS4zNjYxNzk3Ny0uNDk2NDg0Ni0uMzI0NzEwMjItLjgwMjY0OTUuMDQxNDY5NTUtLjMwNjE2NDguMjQxNzI0ODUtLjU2NzU4NTgxLjUyNjUyODQtLjY4NzM1MDQ4LjI4NDU0NTQ1LS4xMTcyNzI3My42MDkwOTA5MS0uMDcyNzI3MjcuODUxODE4MTguMTE4MTgxODJsMy4xODE4MTgxOCAyLjQ4NDU0NTQ2eiIgZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4KCg==);mask-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHdpZHRoPSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjAgMTBjMCA1LjUyMjcyNzMtNC40NzcyNzI3IDEwLTEwIDEwLTUuNTIyNzI3MjcgMC0xMC00LjQ3NzI3MjctMTAtMTAgMC01LjUyMjcyNzI3IDQuNDc3MjcyNzMtMTAgMTAtMTAgNS41MjI3MjczIDAgMTAgNC40NzcyNzI3MyAxMCAxMHptLTUuMjgwOTA5MS00LjIyNzI3MjczYy4yMDEwMDk4LS4yMDgzMjczNy40OTM2NjM5LS4zMDA5OTc5Mi43Nzc5NDg5LS4yNDYzNDE4NHMuNTIxNzEyMy4yNDkyMzkwNS42MzExNDIuNTE3MjUwOTNjLjEzODE1MzQuMzI5NzUwNzMuMDYxNDQ3MS43MTA0MDEtLjE5MzYzNjMuOTYwOTA5MDlsLTYuODgwMDAwMDUgNi45NDQ1NDU0NWMtLjMwNTIyMzczLjMwNzY4ODQtLjc5MjQ0OTgzLjMzODE2NDQtMS4xMzM2MzYzNi4wNzA5MDkxbC0zLjc4NDU0NTQ1LTIuOTUxODE4MmMtLjI0MjY4MjI3LS4xOTEyMTE4LS4zNjYxNzk3Ny0uNDk2NDg0Ni0uMzI0NzEwMjItLjgwMjY0OTUuMDQxNDY5NTUtLjMwNjE2NDguMjQxNzI0ODUtLjU2NzU4NTgxLjUyNjUyODQtLjY4NzM1MDQ4LjI4NDU0NTQ1LS4xMTcyNzI3My42MDkwOTA5MS0uMDcyNzI3MjcuODUxODE4MTguMTE4MTgxODJsMy4xODE4MTgxOCAyLjQ4NDU0NTQ2eiIgZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4KCg==);position:absolute;top:6px;transform:scale(.9);width:20px}@media(min-width:600px){.is-style-checkbox li:before{top:8px;transform:0}}.is-style-checkbox li li:before{-webkit-mask-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHdpZHRoPSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjAgMTBjMCA1LjUyMjcyNzMtNC40NzcyNzI3IDEwLTEwIDEwLTUuNTIyNzI3MjcgMC0xMC00LjQ3NzI3MjctMTAtMTAgMC01LjUyMjcyNzI3IDQuNDc3MjcyNzMtMTAgMTAtMTAgNS41MjI3MjczIDAgMTAgNC40NzcyNzI3MyAxMCAxMHptLTEuNzUxOTUzMSAwYzAtNC41NTUxNzEzNC0zLjY5Mjg3NTUtOC4yNDgwNDY4OC04LjI0ODA0NjktOC4yNDgwNDY4OC00LjU1NTE3MTM0IDAtOC4yNDgwNDY4OCAzLjY5Mjg3NTU0LTguMjQ4MDQ2ODggOC4yNDgwNDY4OCAwIDQuNTU1MTcxNCAzLjY5Mjg3NTU0IDguMjQ4MDQ2OSA4LjI0ODA0Njg4IDguMjQ4MDQ2OSA0LjU1NTE3MTQgMCA4LjI0ODA0NjktMy42OTI4NzU1IDguMjQ4MDQ2OS04LjI0ODA0Njl6bS00LjM1MjY2MTctMy4zMDQwODM4MWMuMjAxMDA5OC0uMjA4MzI3MzcuNDkzNjYzOS0uMzAwOTk3OTIuNzc3OTQ4OS0uMjQ2MzQxODRzLjUyMTcxMjMuMjQ5MjM5MDUuNjMxMTQyLjUxNzI1MDkzYy4xMzgxNTM0LjMyOTc1MDczLjA2MTQ0NzEuNzEwNDAxLS4xOTM2MzYzLjk2MDkwOTA5bC02LjA1NjI5NDM1IDYuMDIxMzU2NTNjLS4zMDUyMjM3My4zMDc2ODg0LS43OTI0NDk4My4zMzgxNjQ0LTEuMTMzNjM2MzYuMDcwOTA5MWwtMy4yNDExNDcwMS0yLjY0ODE4MThjLS4yNDI2ODIyNy0uMTkxMjExOC0uMzY2MTc5NzctLjQ5NjQ4NDYtLjMyNDcxMDIyLS44MDI2NDk1LjA0MTQ2OTU1LS4zMDYxNjQ4LjI0MTcyNDg1LS41Njc1ODU4LjUyNjUyODQtLjY4NzM1MDUyLjI4NDU0NTQ1LS4xMTcyNzI3My42MDkwOTA5MS0uMDcyNzI3MjcuODUxODE4MTguMTE4MTgxODJsMi42Mzg0MTk3NCAyLjE4MDkwOTF6Ii8+PC9zdmc+);mask-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB2aWV3Qm94PSIwIDAgMjAgMjAiIHdpZHRoPSIyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMjAgMTBjMCA1LjUyMjcyNzMtNC40NzcyNzI3IDEwLTEwIDEwLTUuNTIyNzI3MjcgMC0xMC00LjQ3NzI3MjctMTAtMTAgMC01LjUyMjcyNzI3IDQuNDc3MjcyNzMtMTAgMTAtMTAgNS41MjI3MjczIDAgMTAgNC40NzcyNzI3MyAxMCAxMHptLTEuNzUxOTUzMSAwYzAtNC41NTUxNzEzNC0zLjY5Mjg3NTUtOC4yNDgwNDY4OC04LjI0ODA0NjktOC4yNDgwNDY4OC00LjU1NTE3MTM0IDAtOC4yNDgwNDY4OCAzLjY5Mjg3NTU0LTguMjQ4MDQ2ODggOC4yNDgwNDY4OCAwIDQuNTU1MTcxNCAzLjY5Mjg3NTU0IDguMjQ4MDQ2OSA4LjI0ODA0Njg4IDguMjQ4MDQ2OSA0LjU1NTE3MTQgMCA4LjI0ODA0NjktMy42OTI4NzU1IDguMjQ4MDQ2OS04LjI0ODA0Njl6bS00LjM1MjY2MTctMy4zMDQwODM4MWMuMjAxMDA5OC0uMjA4MzI3MzcuNDkzNjYzOS0uMzAwOTk3OTIuNzc3OTQ4OS0uMjQ2MzQxODRzLjUyMTcxMjMuMjQ5MjM5MDUuNjMxMTQyLjUxNzI1MDkzYy4xMzgxNTM0LjMyOTc1MDczLjA2MTQ0NzEuNzEwNDAxLS4xOTM2MzYzLjk2MDkwOTA5bC02LjA1NjI5NDM1IDYuMDIxMzU2NTNjLS4zMDUyMjM3My4zMDc2ODg0LS43OTI0NDk4My4zMzgxNjQ0LTEuMTMzNjM2MzYuMDcwOTA5MWwtMy4yNDExNDcwMS0yLjY0ODE4MThjLS4yNDI2ODIyNy0uMTkxMjExOC0uMzY2MTc5NzctLjQ5NjQ4NDYtLjMyNDcxMDIyLS44MDI2NDk1LjA0MTQ2OTU1LS4zMDYxNjQ4LjI0MTcyNDg1LS41Njc1ODU4LjUyNjUyODQtLjY4NzM1MDUyLjI4NDU0NTQ1LS4xMTcyNzI3My42MDkwOTA5MS0uMDcyNzI3MjcuODUxODE4MTguMTE4MTgxODJsMi42Mzg0MTk3NCAyLjE4MDkwOTF6Ii8+PC9zdmc+)}.is-twentynineteen .is-style-checkbox li:before{top:10px}.is-style-none,.is-style-none li{list-style-type:none!important;padding-left:0!important}.is-style-none li:before{content:"​"} .is-style-circular .wp-block-button__link{border-radius:100px!important}.is-style-3d .wp-block-button__link{box-shadow:inset 0 -3px 0 0 #00000040}.is-style-shadow{z-index:1}.is-style-shadow .wp-block-button__link{box-shadow:0 4px 6px #0000001c,0 1px 3px rgba(0,0,0,.075)} .components-coblocks-animation-toggle.has-animation{position:relative}.components-coblocks-animation-toggle.has-animation :after{border-color:#0000 #1e1e1e #1e1e1e #0000;border-style:solid;border-width:4px;content:"";display:block;height:8px;position:absolute;right:0;top:1px;transform:rotate(-90deg);width:8px}.components-coblocks-animation-toggle .components-button:not(:hover) .coblocks-icon-animation .medium-circle{fill:#727272}.components-coblocks-animation-toggle .components-button:not(:hover) .coblocks-icon-animation .small-circle{fill:#c6c6c6}.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .large-circle,.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .large-circle{animation:bounce .3s ease-in;animation-fill-mode:forwards}.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .medium-circle,.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .medium-circle{animation:bounce .3s ease-in;animation-delay:.1s;animation-fill-mode:forwards;fill:rgba(var(--wp-admin-theme-color-rgb),.66);position:relative}.components-coblocks-animation-toggle .components-button:hover .coblocks-icon-animation .small-circle,.components-coblocks-animation-toggle .components-button[aria-expanded=true] .coblocks-icon-animation .small-circle{animation:bounce .3s ease-in;animation-delay:.2s;animation-fill-mode:forwards;fill:rgba(var(--wp-admin-theme-color-rgb),.33)}.components-coblocks-animation-dropdown .components-popover__content{border-color:#1e1e1e;box-shadow:none}.components-coblocks-animation-dropdown .components-menu-group+.components-menu-group{border-top-color:#1e1e1e}.components-coblocks-animation-dropdown .components-menu-item__button.components-button.has-icon{padding-right:6px}@keyframes bounce{0%{transform:translate(0)}50%{transform:translateY(-2px)}to{transform:translate(0)}}.coblocks__preview .wp-block{margin:0;max-width:none!important}.coblocks__preview .components-resizable-box__container{width:100%!important}.coblocks__preview .components-tip{margin-top:12px}.coblocks__preview .block-editor-block-preview__content .block-editor-block-list__block{margin-bottom:0;margin-top:0}body:not(.amp) .coblocks-animate{animation-fill-mode:forwards;animation-timing-function:ease-in;opacity:0}body:not(.amp) .coblocks-animate.animate-loop{animation-iteration-count:infinite}body:not(.amp) .coblocks-animate.fadeIn{animation-duration:.75s;animation-name:fadeIn}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}body:not(.amp) .coblocks-animate.zoomIn{animation-duration:.75s;animation-name:zoomIn}@keyframes zoomIn{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}body:not(.amp) .coblocks-animate.slideInLeft{animation-duration:.75s;animation-name:slideInLeft}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-5em)}to{opacity:1;transform:translateX(0)}}body:not(.amp) .coblocks-animate.slideInRight{animation-duration:.75s;animation-name:slideInRight}@keyframes slideInRight{0%{opacity:0;transform:translateX(5em)}to{opacity:1;transform:translateX(0)}}body:not(.amp) .coblocks-animate.slideInBottom{animation-duration:.75s;animation-name:slideInBottom}@keyframes slideInBottom{0%{opacity:0;transform:translateY(5em)}to{opacity:1;transform:translateY(0)}}body:not(.amp) .coblocks-animate.clipHorizontal{animation-duration:.75s;animation-name:clipHorizontal}@keyframes clipHorizontal{0%{clip-path:polygon(0 50%,0 100%,0 100%,0 50%,100% 50%,100% 0,100% 0,100% 50%);opacity:0}to{clip-path:polygon(0 50%,0 100%,100% 100%,100% 50%,100% 50%,100% 0,0 0,0 50%);opacity:1}}body:not(.amp) .coblocks-animate.clipVertical{animation-duration:.75s;animation-name:clipVertical}@keyframes clipVertical{0%{clip-path:polygon(50% 0,100% 0,100% 0,50% 0,50% 100%,0 100%,0 100%,50% 100%);opacity:0}to{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,50% 100%,0 100%,0 0,50% 0);opacity:1}} .gravatar-grid-pattern .gravatar-grid-pattern__row,.gravatar-grid-pattern .gravatar-grid-pattern__title{margin-left:auto;margin-right:auto;max-width:729px!important}.gravatar-grid-pattern div.wp-block-gravatar-block.gravatar-block--portrait{background-color:transparent;border:0;max-width:unset!important;min-width:unset;padding:0}.gravatar-grid-pattern .gravatar-block__status{border:1px dotted}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait{width:167px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:8px!important}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar .gravatar-block-image__image{border-radius:8px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name{margin-bottom:4px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:18px}.gravatar-grid-pattern.gravatar-grid-pattern--1 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--location{margin-top:0}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait{width:229px}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:8px!important}.gravatar-grid-pattern.gravatar-grid-pattern--2 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text,.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:24px}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait{text-align:center;width:215px}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{border-radius:50%;margin-bottom:8px!important;overflow:hidden}.gravatar-grid-pattern.gravatar-grid-pattern--3 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:24px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait{margin-bottom:20px;width:353px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-image.gravatar-block-image--avatar{margin-bottom:16px!important}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name{margin-bottom:8px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-name .gravatar-block-name__text{font-size:32px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--location{margin-top:0}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-paragraph--description{margin-top:16px}.gravatar-grid-pattern.gravatar-grid-pattern--4 div.wp-block-gravatar-block.gravatar-block--portrait .gravatar-block-group--verified-accounts{margin-top:24px}.gravatar-grid-pattern.gravatar-grid-pattern--5 .gravatar-grid-pattern__row{container-type:inline-size}@container (min-width: 728px){.gravatar-grid-pattern.gravatar-grid-pattern--5 div.wp-block-gravatar-block.gravatar-block--portrait:nth-child(4n-1){margin-left:249px}} .gravatar-grid-pattern div.wp-block-gravatar-block.gravatar-block--portrait>.block-editor-inner-blocks>.block-editor-block-list__layout{gap:0} /* Theme Name: FCPD News Theme URI: Author: Fairfax County Police Department Author URI: Description: Custom block theme for fcpdnews.org, the Fairfax County Police Department's public news outlet. Built around the FCPD brand kit (Badge Blue + Badge Silver primaries, DM Sans + STIX Two Text). Requires at least: 6.5 Tested up to: 6.8 Requires PHP: 7.4 Version: 1.0.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fcpd-news Tags: news, civic, block-theme */ /* Design tokens */ :root { --badge-blue: #022873; --badge-silver: #BFBCBA; --n-50: #F7F7F8; --n-100: #ECECED; --n-200: #D9D9D9; --n-300: #BFBCBA; --n-400: #8A9097; --n-500: #656C73; --n-600: #515659; --n-700: #33373A; --n-800: #1C1F21; --n-900: #0D0D0D; --b-50: #E8EDF7; --b-100: #C3D0EC; --b-200: #7C93D1; --b-400: #03318C; --b-500: #022873; --b-600: #021F59; --b-700: #011640; --b-800: #000D26; --gold-500: #E8B233; --gold-700: #935810; --copper-500: #A6552E; --copper-700: #6B2A14; --red-500: #C8202A; --red-600: #A11721; --white: #FFFFFF; --text-inverse: var(--white); /* Warm "stone" canvas: white cards/header lift off a warm ground (separates better than the old cool tint did). */ --paper: #EDEBE6; --bg: var(--paper); --surface: var(--white); --surface-raised: var(--white); --surface-alt: var(--n-50); --text: var(--n-900); --text-muted: var(--n-700); --text-faint: var(--n-500); --border: var(--n-400); --rule: var(--n-400); /* Heading divider: brand-tinted so it reads on the stone canvas (the old #ECECED washed out). */ --heading-rule: rgba(2, 40, 115, 0.28); --focus-ring: var(--badge-blue); /* Active-state accent: Badge Blue (light) / Badge Silver (dark). Gold retired from the chrome in the 2026 redesign. */ --accent: var(--badge-blue); /* Hover-only gold splash (gold-700 is AA on white); gold never carries meaning on its own, persistent states stay Badge Blue. */ --accent-hover: var(--gold-700); --font-sans: "DM Sans", sans-serif; --font-serif: "STIX Two Text", serif; --gap-section: 2.5rem; --gap-card: 1rem; --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --control-h: 38px; --max-width-page: 1280px; --max-width-article: 720px; --max-width-prose: 60ch; /* Warm border + float shadow (matched to the stone canvas) so cards read as raised surfaces, not flat outlined boxes. */ --card-border: #D8D4CC; --shadow-card: 0 1px 2px rgba(40, 33, 20, 0.06), 0 10px 28px rgba(40, 33, 20, 0.10); --shadow-hover: 0 10px 30px rgba(13, 13, 13, 0.12); --shadow-lift: 0 8px 28px rgba(2, 40, 115, 0.16); --shadow-panel: 0 12px 40px rgba(1, 22, 64, 0.28); } [data-theme="dark"] { --bg: #0F1217; --surface: #161B23; --surface-raised: #1D2330; --surface-alt: #12161D; --text: var(--text-inverse); --text-muted: var(--n-200); --text-faint: var(--n-300); --border: var(--n-400); --rule: var(--n-400); --heading-rule: rgba(191, 188, 186, 0.30); --focus-ring: var(--badge-silver); --accent: var(--badge-silver); --accent-hover: var(--gold-500); --card-border: #2A3242; --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.50); --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.50); --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1217; --surface: #161B23; --surface-raised: #1D2330; --surface-alt: #12161D; --text: var(--text-inverse); --text-muted: var(--n-200); --text-faint: var(--n-300); --border: var(--n-400); --rule: var(--n-400); --heading-rule: rgba(191, 188, 186, 0.30); --focus-ring: var(--badge-silver); --accent: var(--badge-silver); --card-border: #2A3242; --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-hover: 0 10px 30px rgba(0, 0, 0, 0.50); --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.50); --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.55); } } /* Reset + base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; height: auto; } a { color: inherit; text-decoration: none; } .wp-site-blocks { background: var(--bg); } .wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; } .wp-site-blocks > footer { margin-block-start: 0; } /* Compound selector avoids collision with WP's automatic body.page class, which would otherwise constrain the whole body. */ .wp-block-group.page { max-width: var(--max-width-page); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } /* Header chrome escapes the .page max-width to span full viewport; the extra class beats the .page rule above. */ .wp-block-group.fcpd-header-shell.page { max-width: none; padding: 0; } /* Neutralize WP's is-layout-flow margin between wp:group children; compound selector beats WP regardless of source order. */ .wp-block-group.fcpd-header-shell > *, .fcpd-header-shell > *, .wp-block-group.site-footer > *, .site-footer > *, .wp-block-group.footer-main > * { margin-block-start: 0; margin-block-end: 0; } /* Skip link */ .skip-link, .fcpd-skip-link { position: absolute; left: -9999px; top: 0; background: var(--badge-blue); color: var(--text-inverse); padding: 0.5rem 0.75rem; z-index: 200; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; } .skip-link:focus-visible, .fcpd-skip-link:focus-visible { left: 0.5rem; top: 0.5rem; outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Header chrome */ .site-header { background: var(--surface-raised); border-bottom: 2px solid var(--badge-blue); margin-bottom: 0.75rem; box-shadow: 0 6px 16px -10px rgba(40, 33, 20, 0.35); /* Lift header above main-content stacking contexts so dropdowns never hide behind hero cards. */ position: relative; z-index: 100; } [data-theme="dark"] .site-header { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } } /* Content capped to page width and centered; the white band itself stays full-bleed. */ .masthead-inner { max-width: var(--max-width-page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; padding: 1.3rem 1.5rem; } .masthead-left { display: grid; grid-auto-flow: column; align-items: center; gap: 1rem; justify-content: start; justify-self: start; } .brand-seal { display: block; height: 110px; width: auto; /* Square box keeps the portrait badge contained and centered; the cramped grid track + global img max-width would otherwise distort it. */ aspect-ratio: 1 / 1; object-fit: contain; flex-shrink: 0; margin-top: -2.75rem; margin-bottom: -0.375rem; transform: translateY(-0.28rem); } .masthead-center { display: grid; justify-items: center; } .brand-nameplate { display: grid; grid-auto-flow: column; align-items: center; gap: 1rem; text-decoration: none; } .brand-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 0.01em; color: var(--b-700); line-height: 1; text-box-trim: trim-both; text-box-edge: cap alphabetic; } .brand-word-news { color: var(--text-muted); } [data-theme="dark"] .brand-wordmark { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-wordmark { color: var(--text); } } .masthead-right { display: grid; grid-auto-flow: column; align-items: center; gap: 0.35rem; justify-content: end; justify-self: end; } .header-dropdown-group { display: grid; grid-auto-flow: column; align-items: center; gap: 0.75rem; } .site-header.search-open .header-dropdown-group { display: none; } .primary-nav { position: relative; z-index: 50; display: grid; grid-auto-flow: column; align-items: center; gap: 0.75rem; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; } /* Plain nav links in both flanks; the treatment matches the .nav-disclosure buttons beside them. */ .nav-link { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); text-decoration: none; padding: 0.6rem 0.7rem; position: relative; text-align: center; transition: color 200ms ease, text-decoration-color 200ms ease; } .nav-link:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent-hover); } .nav-link[aria-current="page"] { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--accent); } .nav-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .social-strip { display: grid; grid-auto-flow: column; align-items: center; justify-content: end; gap: 0.35rem; } .social-icon { width: 32px; height: 32px; display: grid; place-content: center; color: var(--white); border-radius: 50%; text-decoration: none; transition: background 160ms ease; } .social-icon:hover { background: var(--b-600); } .social-icon:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; } .social-icon svg { width: 18px; height: 18px; display: block; } /* Disclosure wrappers (Districts, Resources): dropdowns, not page links, so no underline/highlight, only a color shift + caret rotate. */ .disclosure-wrapper { position: relative; display: inline-flex; align-items: center; } .nav-disclosure { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: none; border: none; padding: 0.6rem 0.7rem; cursor: pointer; transition: color 200ms ease; } .nav-disclosure:hover { color: var(--text); } .nav-disclosure:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .nav-disclosure .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-bottom: 4px; transition: transform 200ms ease; } .nav-disclosure[aria-expanded="true"] { color: var(--text); } .nav-disclosure[aria-expanded="true"] .caret { transform: rotate(225deg); margin-bottom: -2px; } /* Dropdown panels (Districts, Resources): no top accent bar, a single uniform neutral border on all corners. */ .dropdown-panel { position: absolute; top: calc(100% + 8px); right: 0; left: auto; min-width: 280px; background: var(--surface-raised); border: 1px solid var(--n-100); border-radius: var(--radius); box-shadow: 0 10px 28px rgba(13, 13, 13, 0.10), 0 1px 2px rgba(13, 13, 13, 0.06); padding: 0.5rem; z-index: 60; } [data-theme="dark"] .dropdown-panel { border-color: var(--n-700); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dropdown-panel { box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4); } } /* Left-flank panel anchors to its left edge so it opens rightward into the masthead, not off-viewport. */ .dropdown-panel--left { right: auto; left: 0; } .dropdown-panel[hidden] { display: none; } @media (prefers-reduced-motion: no-preference) { .dropdown-panel:not([hidden]) { animation: dropdownIn 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both; } } @keyframes dropdownIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .dropdown-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0.6rem 0.7rem; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); text-decoration: none; border-radius: var(--radius-sm); transition: background 160ms ease, color 160ms ease; } .dropdown-link:hover { background: var(--surface-alt); color: var(--badge-blue); } [data-theme="dark"] .dropdown-link:hover { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dropdown-link:hover { color: var(--text); } } .dropdown-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .dropdown-link .count { font-family: var(--font-sans); font-size: 12px; color: var(--text-faint); font-weight: 400; } .dropdown-link .external { color: var(--text-faint); font-weight: 400; } .dropdown-divider { height: 1px; background: var(--n-100); margin: 0.35rem 0; } .dropdown-link.aggregate { font-weight: 700; color: var(--badge-blue); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.78rem; } [data-theme="dark"] .dropdown-link.aggregate { color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dropdown-link.aggregate { color: var(--badge-silver); } } /* Screen-reader-only text */ .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .site-utility { background: var(--badge-blue); color: var(--white); font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.04em; } .site-utility__inner { max-width: var(--max-width-page); margin-inline: auto; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; padding: 0.45rem 1.5rem; } .utility-contact { display: grid; grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.5rem; } .utility-item { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--white); letter-spacing: 0.02em; /* Items wrap as whole units; "703-691-2131" must never break mid-number. */ white-space: nowrap; } .utility-item a { color: var(--white); font-weight: 600; text-decoration: none; display: inline-block; padding-block: 0.3rem; margin-block: -0.3rem; } .utility-item a:hover { text-decoration: underline; text-underline-offset: 3px; } .utility-item a:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; } .utility-sep { color: var(--badge-silver); font-weight: 400; } .utility-phone-icon { width: 0.875em; height: 0.875em; display: inline-block; vertical-align: -0.125em; margin-right: 0.3125em; color: currentColor; } /* Header search */ .header-search { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; } /* Icon-expand search */ .header-search-toggle-wrap { position: relative; display: grid; grid-auto-flow: column; align-items: center; gap: 0.35rem; margin-left: 1.75rem; } .header-search-toggle { display: grid; place-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--text-muted); border-radius: 50%; padding: 0; cursor: pointer; transition: color 160ms ease, background 160ms ease; } .header-search-toggle:hover { color: var(--text); background: var(--surface-alt); } .header-search-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .header-search-toggle .search-icon { width: 18px; height: 18px; } .header-search-field { width: 280px; height: var(--control-h); align-items: stretch; } .header-search-field[hidden] { display: none; } .header-search-field .search-input, .header-search-field .search-submit { height: var(--control-h); } .header-search-field .search-input:focus-visible { outline-offset: -2px; } .nav-drawer .drawer-search { width: 100%; justify-self: stretch; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--rule); grid-template-columns: 1fr auto; gap: 0.5rem; } /* Drawer search reuses the base controls, bumped to the taller --control-h to match the news filter. */ .nav-drawer .drawer-search .search-input { height: var(--control-h); padding: 0 0.75rem; font-size: 0.9375rem; } .nav-drawer .drawer-search .search-submit { height: var(--control-h); padding: 0 1rem; } .search-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .search-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; } .search-input { width: 100%; font-family: var(--font-sans); font-size: 0.8125rem; line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.375rem 0.625rem; } .search-input::placeholder { color: var(--text-faint); font-family: var(--font-sans); } .search-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .search-submit { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; color: var(--text-inverse); background: var(--badge-blue); border: 1px solid var(--badge-blue); border-radius: var(--radius); padding: 0.375rem 0.75rem; cursor: pointer; transition: background 100ms ease, border-color 100ms ease; } .search-submit:hover { background: var(--gold-700); border-color: var(--gold-700); } .search-submit:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } [data-theme="dark"] .search-submit { background: var(--b-400); border-color: var(--b-400); } [data-theme="dark"] .search-submit:hover { background: var(--gold-700); border-color: var(--gold-700); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .search-submit { background: var(--b-400); border-color: var(--b-400); } :root:not([data-theme="light"]) .search-submit:hover { background: var(--gold-700); border-color: var(--gold-700); } } /* Theme toggle */ .theme-toggle { position: relative; display: grid; place-content: center; width: 36px; height: 36px; background: none; border: none; color: var(--text-muted); border-radius: 50%; padding: 0; cursor: pointer; transition: color 160ms ease, background 160ms ease; } .theme-toggle svg { width: 18px; height: 18px; display: block; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } .theme-toggle:hover { color: var(--text); background: var(--surface-alt); } .theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Hamburger */ .nav-toggle { position: relative; display: none; place-content: center; width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 0; cursor: pointer; transition: background 100ms ease, color 100ms ease, border-color 100ms ease; } .nav-toggle:hover { background: var(--badge-blue); color: var(--text-inverse); border-color: var(--badge-blue); } [data-theme="dark"] .nav-toggle:hover { background: var(--badge-silver); color: var(--n-900); border-color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-toggle:hover { background: var(--badge-silver); color: var(--n-900); border-color: var(--badge-silver); } } .nav-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .nav-toggle-lines { position: relative; width: 18px; height: 14px; display: block; } .nav-toggle-lines span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform 150ms ease, opacity 100ms ease, top 150ms ease; } .nav-toggle-lines span:nth-child(1) { top: 0; } .nav-toggle-lines span:nth-child(2) { top: 6px; } .nav-toggle-lines span:nth-child(3) { top: 12px; } .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-lines span:nth-child(3) { top: 6px; transform: rotate(-45deg); } .nav-toggle[aria-expanded="true"] { background: var(--badge-blue); color: var(--text-inverse); border-color: var(--badge-blue); } [data-theme="dark"] .nav-toggle[aria-expanded="true"] { background: var(--badge-silver); color: var(--n-900); border-color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-toggle[aria-expanded="true"] { background: var(--badge-silver); color: var(--n-900); border-color: var(--badge-silver); } } /* Drawer */ .nav-backdrop { position: fixed; inset: 0; background: rgba(13, 13, 13, 0.55); opacity: 0; pointer-events: none; transition: opacity 150ms ease; z-index: 90; } .nav-backdrop.is-open { opacity: 1; pointer-events: auto; } /* Mobile drawer; .is-open (set by mobile-nav.js openDrawer) triggers the slide-in. */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 90vw; background: var(--surface-raised); border-left: 1px solid var(--rule); overflow-y: auto; z-index: 100; transform: translateX(100%); transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1); box-shadow: -12px 0 32px rgba(0, 0, 0, 0.12); } .nav-drawer.is-open { transform: translateX(0); } [data-theme="dark"] .nav-drawer { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-drawer { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.5); } } .drawer-head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 16px; background: var(--surface-alt); border-bottom: 1px solid var(--rule); } .drawer-head-label { font-family: var(--font-sans); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .drawer-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 4px; color: var(--text-muted); cursor: pointer; } .drawer-close:hover { background: var(--rule); color: var(--text); } .drawer-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .drawer-close svg { width: 20px; height: 20px; } .drawer-brand { padding: 18px 20px; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; } .drawer-seal { display: block; height: 48px; width: auto; } .drawer-words { display: flex; flex-direction: column; gap: 3px; line-height: 1.15; } .drawer-wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 20px; color: var(--badge-blue); letter-spacing: -0.005em; line-height: 1; } [data-theme="dark"] .drawer-wordmark { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-wordmark { color: var(--text); } } .drawer-wordmark .news { font-weight: 500; color: var(--text-muted); } .drawer-subtitle { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.8125rem; letter-spacing: 0; line-height: 1.3; color: var(--text-muted); } .drawer-section { border-bottom: 1px solid var(--rule); } .drawer-section-head { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 14px 20px; background: var(--surface); border: none; cursor: pointer; text-align: left; min-height: 44px; } .drawer-section-head:hover { background: var(--surface-alt); } .drawer-section-head:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .drawer-section-label { font-family: var(--font-sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--badge-blue); } [data-theme="dark"] .drawer-section-label { color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-section-label { color: var(--badge-silver); } } .drawer-caret { width: 8px; height: 8px; border-right: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint); transform: rotate(-45deg); transition: transform 200ms ease; } .drawer-section-head[aria-expanded="true"] .drawer-caret { transform: rotate(45deg); } .drawer-section-body { padding: 4px 0 8px; background: var(--surface); } .drawer-section-body[hidden] { display: none; } /* Top-level drawer links (Home, Newsroom, About): section-head rows that navigate directly, interleaved to mirror the desktop nav order. */ .drawer-toplink { border-bottom: 1px solid var(--rule); text-decoration: none; } .drawer-toplink[aria-current="page"] { background: var(--surface-alt); } /* Drawer link items */ .drawer-item { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 12px 20px; font-family: var(--font-sans); font-size: 16px; font-weight: 500; color: var(--text); text-decoration: none; min-height: 44px; transition: background 160ms ease, color 160ms ease; } .drawer-item:hover { background: var(--surface-alt); color: var(--badge-blue); } [data-theme="dark"] .drawer-item:hover { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-item:hover { color: var(--text); } } .drawer-item:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .drawer-item[aria-current="page"] { font-weight: 700; border-left: 3px solid var(--accent); padding-left: 17px; } .drawer-item .external { font-family: var(--font-sans); font-size: 14px; color: var(--text-faint); } .drawer-item .count { font-family: var(--font-sans); font-size: 12px; color: var(--text-faint); font-weight: 400; } .drawer-item-aggregate { font-weight: 700; color: var(--badge-blue); } [data-theme="dark"] .drawer-item-aggregate { color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-item-aggregate { color: var(--badge-silver); } } .drawer-follow { padding: 18px 20px; background: var(--surface-alt); border-bottom: 1px solid var(--rule); } .drawer-follow-label { font-family: var(--font-serif); font-style: italic; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; display: block; } .drawer-follow-row { display: flex; gap: 4px; } .drawer-follow-row a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); border-radius: 4px; text-decoration: none; transition: color 160ms ease, background 160ms ease; } .drawer-follow-row a:hover { color: var(--badge-blue); background: var(--surface); } [data-theme="dark"] .drawer-follow-row a:hover { color: var(--text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawer-follow-row a:hover { color: var(--text); } } .drawer-follow-row a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .drawer-follow-row svg { width: 20px; height: 20px; } /* Section heads */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 0.625rem; border-bottom: 1px solid var(--heading-rule); } .section-head h2 { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--badge-blue); } [data-theme="dark"] .section-head h2 { color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .section-head h2 { color: var(--badge-silver); } } /* Compound selector overrides WP's is-layout-flow on wp:group; flex-wrap keeps tab and date on one line. */ .wp-block-group.eyebrow-row, .eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; font-size: 0.75rem; color: var(--text-faint); font-weight: 500; letter-spacing: 0.04em; } .eyebrow-row .wp-block-post-date { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); font-variant-numeric: tabular-nums; } .wp-block-group.eyebrow-row > *, .eyebrow-row > * { margin-block-start: 0; margin-block-end: 0; } .tab { display: inline-flex; align-items: center; background: var(--badge-blue); color: var(--text-inverse); font-family: var(--font-sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.25rem 0.5rem; line-height: 1.25; border-radius: var(--radius); } .tab--gold { background: var(--gold-500); color: var(--n-900); } .tab--copper { background: var(--copper-700); color: var(--text-inverse); } .tab--red { background: var(--red-600); color: var(--text-inverse); } /* Cards */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; } .card:hover { border-color: var(--badge-blue); transform: translateY(-2px); box-shadow: 0 6px 18px -10px rgba(2, 40, 115, 0.35); } [data-theme="dark"] .card:hover { border-color: var(--badge-silver); box-shadow: 0 6px 18px -10px rgba(191, 188, 186, 0.25); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card:hover { border-color: var(--badge-silver); box-shadow: 0 6px 18px -10px rgba(191, 188, 186, 0.25); } } @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } } .card-body { padding: 1rem; display: flex; flex-direction: column; gap: 0.625rem; flex: 1; } .card-headline { font-family: var(--font-serif); font-weight: 700; color: var(--text); text-wrap: balance; line-height: 1.2; } .card-headline a { color: inherit; text-decoration: none; } /* Stretched-link: headline anchor's ::before overlay makes the whole card clickable; other in-card links get z-index:2. */ .card-headline a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .card .tab, .card .tab a, .card .wp-block-post-terms, .card .wp-block-post-terms a { position: relative; z-index: 2; } .card-headline a:hover { color: var(--badge-blue); } [data-theme="dark"] .card-headline a:hover { color: var(--badge-silver); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .card-headline a:hover { color: var(--badge-silver); } } .card-headline a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .card-excerpt { font-family: var(--font-sans); color: var(--text-muted); font-size: 0.9375rem; line-height: 1.5; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; } .card-image { aspect-ratio: 16 / 9; background: var(--surface-alt); background-size: cover; background-position: center; position: relative; } .card-image--small { aspect-ratio: 4 / 3; } .card-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-image figure { margin: 0; width: 100%; height: 100%; } .card-image .wp-block-post-featured-image { width: 100%; height: 100%; } .card-image .wp-block-post-featured-image a { display: block; width: 100%; height: 100%; } .card-image .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; } /* Home body, scoped under .home-main so it never disturbs the shared chrome or the other templates. */ .home-main { display: block; } .home-main .wide-width { max-width: var(--max-width-page); margin-inline: auto; padding-inline: 1.5rem; } .home-main .block { padding-block: 3rem; } .home-main .on-blue a:focus-visible, .home-main .on-blue button:focus-visible { outline-color: var(--white); } .home-main .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1rem; margin-bottom: 1.75rem; padding-bottom: 0.9rem; border-bottom: 2px solid var(--heading-rule); } .home-main .section-head-titles { display: grid; gap: 0.4rem; } .wp-block-group.section-head-titles > * { margin-block-start: 0; margin-block-end: 0; } .home-main .label { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8125rem; } .home-main .section-head .eyebrow { color: var(--badge-blue); margin: 0; } .home-main .section-head h2 { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.01em; text-transform: none; color: var(--badge-blue); line-height: 1.05; } .home-main .head-link-wrap { margin: 0; align-self: end; } .home-main .section-head .head-link { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; color: var(--badge-blue); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color 0.15s ease; } .home-main .section-head .head-link:hover { border-color: var(--badge-blue); } /* ---- Hero ---- */ .home-main .hero { display: block; padding-block: 2.75rem 1.5rem; } .wp-block-group.hero > * { margin-block-start: 0; } .home-main .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.5rem; align-items: stretch; } .wp-block-group.hero-grid > * { margin-block-start: 0; } /* Collapse the lead query wrappers so the lead card is the grid child. */ .home-main .hero-slot, .home-main .hero-slot .wp-block-post-template, .home-main .hero-slot .wp-block-post-template > li { display: contents; } /* Lead card */ .home-main .lead { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .wp-block-group.lead > * { margin-block-start: 0; } .home-main .lead-photo { aspect-ratio: 16 / 10; border-bottom: 4px solid var(--badge-blue); } .home-main .lead-body { padding: 1.5rem 1.75rem 1.75rem; display: grid; align-content: start; gap: 1rem; } .wp-block-group.lead-body > * { margin-block-start: 0; } .home-main .lead-title { font-family: var(--font-serif); font-weight: 700; font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.12; letter-spacing: -0.01em; color: var(--text); } .home-main .lead-title a { color: inherit; text-decoration: none; } .home-main .lead-title a:hover { color: var(--badge-blue); } .home-main .lead-title a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } .home-main .dek { color: var(--text-muted); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.55; } .home-main .lead-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.9rem 1.25rem; margin-top: 0.4rem; padding-top: 1.2rem; border-top: 1px solid var(--card-border); } .wp-block-group.lead-footer > * { margin-block-start: 0; } .home-main .lead-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-sans); font-size: 0.875rem; color: var(--text-muted); } .wp-block-group.lead-meta > * { margin-block-start: 0; } .home-main .lead-meta .byline { font-weight: 600; } .home-main .lead-meta .lead-date, .home-main .lead-meta .lead-date time { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: normal; } .home-main .lead-meta .lead-date::before { content: "\00b7"; margin-right: 0.5rem; color: var(--n-400); } .home-main .lead-cta { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.8125rem; color: var(--text-inverse); background: var(--badge-blue); text-decoration: none; padding: 0.7rem 1.1rem; border-radius: var(--radius); transition: background 0.15s ease; } .home-main .lead-cta::after { content: "\2192"; transition: transform 0.15s ease; } .home-main .lead-cta:hover { background: var(--gold-700); } .home-main .lead-cta:hover::after { transform: translateX(3px); } .home-main .lead-cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } [data-theme="dark"] .home-main .lead-cta { background: var(--b-400); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-main .lead-cta { background: var(--b-400); } } /* Social-feed sidebar (PHP-injected placeholder for a future embed) */ .home-main .feed-panel { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; align-self: stretch; min-height: 0; height: 100%; /* align-self alone won't fill this nested grid */ } .wp-block-group.feed-panel > * { margin-block-start: 0; } .home-main .feed-panel__head { background: var(--badge-blue); color: var(--white); padding: 0.7rem 1.25rem; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.85rem; } .home-main .fp-icon { width: 36px; height: 36px; display: grid; place-content: center; background: var(--b-600); border-radius: 50%; color: var(--white); } .home-main .fp-icon svg { width: 20px; height: 20px; } .home-main .feed-panel__head .ttl { font-family: var(--font-sans); font-weight: 800; font-size: 1.2rem; } .home-main .feed-list { list-style: none; margin: 0; padding: 0.4rem 1.4rem; display: grid; grid-auto-rows: 1fr; min-height: 0; } .home-main .feed-list li { border-bottom: 1px solid var(--card-border); } .home-main .feed-list li:last-child { border-bottom: 0; } .home-main .feed-post { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: center; padding-block: 0.95rem; text-decoration: none; height: 100%; } .home-main .pf-icon { width: 30px; height: 30px; display: grid; place-content: center; background: var(--badge-blue); color: var(--white); border-radius: 50%; } .home-main .pf-icon svg { width: 15px; height: 15px; } .home-main .pf-meta { display: block; font-family: var(--font-sans); font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.15rem; } .home-main .pf-meta .handle { color: var(--badge-blue); } .home-main .pf-meta .pf-time { color: var(--text-faint); font-weight: 500; } .home-main .pf-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.45; color: var(--text); } .home-main .feed-post:hover .pf-text { color: var(--badge-blue); } .home-main .feed-post:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .home-main .feed-foot { padding: 1.1rem 1.4rem 1.3rem; border-top: 1px solid var(--card-border); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem; } .home-main .feed-foot .ftxt { font-size: 0.78rem; color: var(--text-muted); margin: 0; } .home-main .feed-foot .follow { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8125rem; color: var(--white); background: var(--badge-blue); text-decoration: none; padding: 0.55rem 0.95rem; border-radius: var(--radius); white-space: nowrap; transition: background 0.15s ease; } .home-main .feed-foot .follow:hover { background: var(--gold-700); } /* Right-column stack: the lead story drives the hero row height; this stack is only a positioning context, so its absolutely-filled inner matches the lead without inflating the row. */ .home-main .hero-aside-stack { position: relative; align-self: stretch; } /* Fills the stack (= lead height); the feed row (1fr) absorbs a taller form instead of growing the hero, keeping bottoms level. */ .home-main .hero-aside-fill { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 1.5rem; } .wp-block-group.hero-aside-fill > * { margin-block-start: 0; } .home-main .home-subscribe-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 1.3rem 1.4rem 1.4rem; display: grid; gap: 0.5rem; } .wp-block-group.home-subscribe-card > * { margin-block-start: 0; } .home-main .home-subscribe-card h2 { font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8125rem; color: var(--badge-blue); margin: 0; } .home-main .home-subscribe-card p { font-family: var(--font-sans); font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); margin: 0; } /* Reuse the footer form classes; on the light card, stack input over button and make the button solid blue (footer's white-on-navy would be invisible here). */ .home-main .home-subscribe-card .footer-subscribe-form { grid-template-columns: 1fr; margin-top: 0.3rem; } .home-main .home-subscribe-card .footer-subscribe-submit { background: var(--badge-blue); color: var(--white); border-color: var(--badge-blue); } .home-main .home-subscribe-card .footer-subscribe-submit:hover { background: var(--gold-700); border-color: var(--gold-700); } /* Card overrides for the real Jetpack form: solid-blue button (the shared white-on-navy would be invisible here) and dark result text. */ .home-main .home-subscribe-card .jetpack_subscription_widget button { background: var(--badge-blue); color: var(--white); border-color: var(--badge-blue); } .home-main .home-subscribe-card .jetpack_subscription_widget button:hover { background: var(--gold-700); color: var(--white); border-color: var(--gold-700); } .home-main .home-subscribe-card .jetpack_subscription_widget #subscribe-result, .home-main .home-subscribe-card .jetpack_subscription_widget #subscribe-result p { color: var(--text-muted); } /* Dark mode: re-point the form's hardcoded light-mode colors at the adaptive tokens (covers both the placeholder and the production Jetpack markup). */ [data-theme="dark"] .home-main .home-subscribe-card h2 { color: var(--badge-silver); } [data-theme="dark"] .home-main .home-subscribe-card .footer-subscribe-input, [data-theme="dark"] .home-main .home-subscribe-card .jetpack_subscription_widget input:not([type="submit"]):not([type="button"]) { background: var(--surface-raised); color: var(--text); border-color: var(--border); } [data-theme="dark"] .home-main .home-subscribe-card .footer-subscribe-submit, [data-theme="dark"] .home-main .home-subscribe-card .jetpack_subscription_widget button { background: var(--b-400); border-color: var(--b-400); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .home-main .home-subscribe-card h2 { color: var(--badge-silver); } :root:not([data-theme="light"]) .home-main .home-subscribe-card .footer-subscribe-input, :root:not([data-theme="light"]) .home-main .home-subscribe-card .jetpack_subscription_widget input:not([type="submit"]):not([type="button"]) { background: var(--surface-raised); color: var(--text); border-color: var(--border); } :root:not([data-theme="light"]) .home-main .home-subscribe-card .footer-subscribe-submit, :root:not([data-theme="light"]) .home-main .home-subscribe-card .jetpack_subscription_widget button { background: var(--b-400); border-color: var(--b-400); } } .home-main .textcard-row { margin-top: 1.5rem; } .wp-block-group.textcard-row > * { margin-block-start: 0; } .home-main .textcard-row .wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .home-main .textcard-row .wp-block-post-template > li { margin: 0; } .home-main .textcard { position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 0.85rem; display: grid; grid-template-columns: 7rem 1fr; align-items: stretch; gap: 1rem; height: 100%; transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease; } .wp-block-group.textcard > * { margin-block-start: 0; } .home-main .textcard:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); border-color: var(--badge-blue); } /* Photo fills the card height so there is no gap above or below; a real image crops to cover, the stand-in icon stays centered. */ .home-main .tc-photo { aspect-ratio: auto; min-height: 5rem; height: 100%; border-radius: var(--radius-sm); overflow: hidden; } .home-main .tc-text { display: grid; align-content: center; gap: 0.3rem; } .wp-block-group.tc-text > * { margin-block-start: 0; } .home-main .tc-title { font-family: var(--font-serif); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; color: var(--badge-blue); } .home-main .tc-title a { color: inherit; text-decoration: none; } .home-main .tc-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; } .home-main .tc-meta, .home-main .tc-meta time { font-family: var(--font-sans); font-size: 0.8125rem; color: var(--text-muted); text-transform: none; letter-spacing: normal; } /* ---- Recent stories (card grid) ---- */ /* Grid lives on the post-template