<input type="checkbox" id="theme-notice-status-example" class="a-theme-notice__status">

<div class="a-theme-notice">
	<p class="h3">Notice Title</p>

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque arcu. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Etiam ligula pede, sagittis quis, interdum ultricies.</p>

	<label for="theme-notice-status-example" class="a-theme-notice__close" aria-label="<?php echo $tx['close']; ?>">&#10005;</label>
</div>

<div class="a-theme-notice__background"></div>

<?php /* Below control is just for this demonstration */ ?>

<label for="theme-notice-status-example">Show notice</label>

.a-theme-notice {
    $self: &;

    background: color('white');
    box-shadow: 0 0 em(4px) color('shadow');
    left: 50%;
    max-height: 100%;
    max-width: em(520px);
    opacity: 0;
    overflow: auto;
    padding: em(20px);
    position: fixed;
    text-align: left;
    top: 50%;
    transform: translate(-50%, -150%);
    transition: transform 1s, opacity 1s;
    width: 95%;
    z-index: 999;

    &__background {
        background: color('black');
        bottom: 0;
        height: 100%;
        left: 0;
        opacity: .7;
        position: fixed;
        transition: bottom 2s;
        width: 100%;
        z-index: 998;
    }

    &__status {
        display: none;

        &:checked {

            + #{$self} {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        &:not(:checked) {

            ~ #{$self}__background {
                bottom: 100%;
            }
        }
    }

    &__close {
        background: color('black');
        color: color('white');
        cursor: pointer;
        display: block;
        line-height: em(20px);
        position: absolute;
        right: 0;
        text-align: center;
        top: 0;
        width: em(20px);
    }
}