.wpcf7 .screen-reader-response {
position: absolute;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
word-wrap: normal !important;
}
.wpcf7 form .wpcf7-response-output {
margin: 2em 0.5em 1em;
padding: 0.2em 1em;
border: 2px solid #00a0d2; }
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
display: none;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #46b450; }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
border-color: #dc3232; }
.wpcf7 form.spam .wpcf7-response-output {
border-color: #f56e28; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
border-color: #ffb900; }
.wpcf7-form-control-wrap {
position: relative;
}
.wpcf7-not-valid-tip {
color: #dc3232; font-size: 1em;
font-weight: normal;
display: block;
}
.use-floating-validation-tip .wpcf7-not-valid-tip {
position: relative;
top: -2ex;
left: 1em;
z-index: 100;
border: 1px solid #dc3232;
background: #fff;
padding: .2em .8em;
width: 24em;
}
.wpcf7-list-item {
display: inline-block;
margin: 0 0 0 1em;
}
.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
content: " ";
}
.wpcf7-spinner {
visibility: hidden;
display: inline-block;
background-color: #23282d; opacity: 0.75;
width: 24px;
height: 24px;
border: none;
border-radius: 100%;
padding: 0;
margin: 0 24px;
position: relative;
}
form.submitting .wpcf7-spinner {
visibility: visible;
}
.wpcf7-spinner::before {
content: '';
position: absolute;
background-color: #fbfbfc; top: 4px;
left: 4px;
width: 6px;
height: 6px;
border: none;
border-radius: 100%;
transform-origin: 8px 8px;
animation-name: spin;
animation-duration: 1000ms;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
.wpcf7-spinner::before {
animation-name: blink;
animation-duration: 2000ms;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes blink {
from {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.wpcf7 [inert] {
opacity: 0.5;
}
.wpcf7 input[type="file"] {
cursor: pointer;
}
.wpcf7 input[type="file"]:disabled {
cursor: default;
}
.wpcf7 .wpcf7-submit:disabled {
cursor: not-allowed;
}
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
direction: ltr;
}
.wpcf7-reflection > output {
display: list-item;
list-style: none;
}
.wpcf7-reflection > output[hidden] {
display: none;
}@font-face {
font-family: "Artrix Roboto";
src: url(//www.artrixglobal.com/wp-content/themes/artrix/front-end/assets/cannabis-compliance/fonts/roboto-v30-latin-regular.woff2) format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Artrix Roboto";
src: url(//www.artrixglobal.com/wp-content/themes/artrix/front-end/assets/cannabis-compliance/fonts/roboto-v30-latin-500.woff2) format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Artrix Roboto";
src: url(//www.artrixglobal.com/wp-content/themes/artrix/front-end/assets/cannabis-compliance/fonts/roboto-v30-latin-700.woff2) format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Artrix Roboto";
src: url(//www.artrixglobal.com/wp-content/themes/artrix/front-end/assets/cannabis-compliance/fonts/roboto-v30-latin-900.woff2) format("woff2");
font-style: normal;
font-weight: 900;
font-display: swap;
}
@font-face {
font-family: "Archivo Black";
src: url(//www.artrixglobal.com/wp-content/themes/artrix/front-end/assets/cannabis-compliance/fonts/ArchivoBlack-Regular.woff2) format("woff2");
font-style: normal;
font-weight: 900;
font-display: swap;
}
@property --line-progress {
syntax: "<percentage>";
inherits: false;
initial-value: 0%;
}
.ccg-page {
font-family: "Artrix Roboto", Arial, sans-serif;
color: #111111;
background: #ffffff;
font-synthesis: none;
--ink: #111111;
--soft-ink: #3f3f42;
--muted: #6f7074;
--line: #dedfe1;
--wash: #f5f5f5;
--wash-2: #eeeeef;
--red: #f00000;
--red-modern: oklch(61% 0.245 28);
--adult: #176b50;
--medical: #2678b9;
--limited: #d5a329;
--prohibited: #dc4538;
color-scheme: light;
}
.ccg-page,
.ccg-page * {
box-sizing: border-box;
}
body.page-us-cannabis-compliance {
min-width: 320px;
scroll-behavior: smooth;
scrollbar-gutter: stable;
}
.ccg-page {
margin: 0;
min-width: 320px;
min-height: 100vh;
overflow-x: hidden;
background: #ffffff;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.ccg-page button,
.ccg-page input,
.ccg-page select {
font: inherit;
}
.ccg-page button,
.ccg-page a {
-webkit-tap-highlight-color: transparent;
}
.ccg-page button {
color: inherit;
}
.ccg-page a {
color: inherit;
}
.ccg-page img,
.ccg-page svg,
.ccg-page canvas {
display: block;
}
.ccg-page ::selection {
background: color-mix(in oklab, var(--red) 22%, white);
color: var(--ink);
}
.ccg-page :focus-visible {
outline: 3px solid color-mix(in oklab, var(--red) 68%, white);
outline-offset: 4px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ccg-page .shell {
width: min(1480px, calc(100% - 80px));
margin-inline: auto;
}
.kicker {
margin: 0 0 14px;
color: var(--red);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.19em;
text-transform: uppercase;
}
.kicker.light {
color: #ff6c64;
}
.site-header {
position: sticky;
top: 0;
z-index: 50;
background: color-mix(in srgb, white 94%, transparent);
border-bottom: 1px solid #ececee;
backdrop-filter: blur(18px) saturate(1.2);
}
.nav-row {
display: flex;
min-height: 76px;
align-items: center;
gap: 34px;
}
.brand {
display: inline-flex;
min-width: 300px;
align-items: center;
gap: 20px;
color: var(--soft-ink);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
}
.brand img {
width: 158px;
height: auto;
}
.brand span {
padding-left: 20px;
border-left: 1px solid #b8b8bb;
}
.desktop-nav {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(18px, 2.5vw, 40px);
margin-left: auto;
}
.desktop-nav a {
position: relative;
padding: 29px 0 27px;
color: #18181a;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.desktop-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 20px;
left: 0;
height: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: right center;
transition: transform 240ms ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
.nav-cta,
.hero-search button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 18px;
border: 0;
background: var(--red);
color: #ffffff;
font-weight: 700;
text-decoration: none;
transition: background 180ms ease, transform 180ms ease;
}
.nav-cta {
min-height: 44px;
padding: 0 20px;
font-size: 13px;
}
.nav-cta svg,
.hero-search button svg {
width: 18px;
height: 18px;
transition: transform 180ms ease;
}
.nav-cta:hover,
.hero-search button:hover {
background: #c90000;
}
.nav-cta:hover svg,
.hero-search button:hover svg {
transform: translateX(4px);
}
.mobile-menu-button,
.mobile-drawer {
display: none;
}
.hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: #ffffff;
}
.hero-grid-lines {
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.32;
background:
linear-gradient(90deg, transparent 0 49.94%, #ececee 49.94% 50.06%, transparent 50.06%),
linear-gradient(#ffffff00 0 99.7%, #ededee 99.7%);
background-size: 100% 100%, 100% 8px;
pointer-events: none;
}
.hero-layout {
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
gap: clamp(32px, 4vw, 66px);
min-height: 590px;
padding-top: 42px;
padding-bottom: 32px;
align-items: center;
}
.hero-copy {
position: relative;
z-index: 3;
align-self: center;
}
.ccg-tool-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0 0 20px;
color: var(--muted);
font-size: 10px;
font-weight: 900;
letter-spacing: 0.11em;
line-height: 1.5;
text-transform: uppercase;
}
.ccg-page .ccg-tool-breadcrumb a {
color: var(--red);
text-decoration: none;
}
.ccg-page .ccg-tool-breadcrumb a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
.hero-copy h1 {
max-width: 620px;
margin: 0;
color: #070708;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(58px, 5.5vw, 94px);
font-weight: 900;
line-height: 0.91;
letter-spacing: -0.065em;
text-wrap: balance;
}
.hero-intro {
max-width: 555px;
margin: 25px 0 20px;
color: var(--soft-ink);
font-size: 18px;
line-height: 1.42;
text-wrap: pretty;
}
.hero-search {
display: grid;
grid-template-columns: minmax(220px, 1fr) auto;
max-width: 620px;
gap: 8px;
}
.hero-search label,
.search-control {
display: flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 0 14px;
background: #ffffff;
border: 1px solid #bfc0c3;
}
.hero-search label:focus-within,
.search-control:focus-within {
border-color: var(--red);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--red) 12%, transparent);
}
.hero-search label svg,
.search-control svg {
flex: 0 0 auto;
width: 19px;
height: 19px;
}
.hero-search input,
.search-control input {
width: 100%;
border: 0;
outline: 0;
background: transparent;
color: var(--ink);
font-size: 14px;
}
.hero-search button {
min-height: 48px;
padding: 0 20px;
cursor: pointer;
}
.hero-note {
margin: 8px 0 0;
color: var(--muted);
font-size: 11px;
}
.hero-map-wrap {
position: relative;
align-self: stretch;
display: grid;
align-items: center;
min-width: 0;
}
.map-stage {
position: relative;
display: grid;
min-height: 490px;
place-items: center;
overflow: hidden;
}
.policy-field {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: auto;
opacity: 0.96;
}
.policy-field[data-fallback="true"] {
background-image: repeating-radial-gradient(ellipse at 58% 43%, transparent 0 18px, rgba(240, 0, 0, 0.06) 19px 20px);
}
.map-canvas {
position: relative;
z-index: 1;
width: min(100%, 730px);
padding: 36px 12px 92px;
}
.map-canvas svg {
width: 100%;
height: auto;
filter: drop-shadow(0 18px 22px rgba(24, 26, 28, 0.12));
}
.map-canvas #path67 {
fill: none !important;
pointer-events: none;
}
.map-canvas path[id],
.map-canvas circle[id] {
cursor: pointer;
vector-effect: non-scaling-stroke;
transition: filter 160ms ease, opacity 160ms ease, stroke 160ms ease;
}
.map-canvas path[id]:hover,
.map-canvas path[id]:focus,
.map-canvas circle[id]:hover,
.map-canvas circle[id]:focus {
filter: saturate(1.15) brightness(1.06);
opacity: 0.88;
outline: none;
}
.map-tooltip {
position: absolute;
z-index: 7;
min-width: 155px;
padding: 10px 12px;
transform: translate(12px, -100%);
background: var(--ink);
color: white;
pointer-events: none;
}
.map-tooltip strong,
.map-tooltip span {
display: block;
}
.map-tooltip strong {
font-size: 13px;
}
.map-tooltip span {
margin-top: 2px;
color: #c8c8cb;
font-size: 11px;
}
.map-legend {
position: absolute;
z-index: 2;
right: 0;
bottom: 25px;
left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 9px 20px;
color: #363639;
font-size: 11px;
}
.map-legend span,
.row-status,
.status-line {
display: inline-flex;
align-items: center;
gap: 7px;
}
.map-legend i,
.row-status i,
.status-line i {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
}
.state-snapshot {
position: absolute;
z-index: 6;
right: 8px;
bottom: 64px;
width: min(340px, calc(100% - 16px));
max-height: min(72vh, 510px);
overflow-y: auto;
overscroll-behavior: contain;
padding: 17px 18px 16px;
background: color-mix(in srgb, white 96%, transparent);
border-top: 4px solid var(--red);
box-shadow: 0 18px 50px rgba(17, 17, 17, 0.16);
backdrop-filter: blur(13px);
}
.snapshot-top {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
color: var(--muted);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
background: #ffffff;
}
.snapshot-top button {
display: grid;
flex: 0 0 38px;
width: 38px;
height: 38px;
padding: 0;
place-items: center;
border: 0;
background: var(--wash);
color: var(--ink);
font-size: 23px;
line-height: 1;
cursor: pointer;
}
.snapshot-top button:hover {
background: var(--red);
color: #ffffff;
}
.snapshot-top button svg {
width: 16px;
height: 16px;
}
.state-snapshot h2 {
margin: 10px 0 6px;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: 28px;
letter-spacing: -0.04em;
}
.status-line {
margin: 0 0 10px;
color: var(--soft-ink);
font-size: 12px;
font-weight: 700;
}
.state-snapshot dl {
margin: 0;
}
.state-snapshot dl div {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 7px 0;
border-top: 1px solid #e1e1e3;
font-size: 11px;
}
.state-snapshot dt {
color: var(--muted);
}
.state-snapshot dd {
margin: 0;
font-weight: 700;
text-align: right;
}
.snapshot-detail {
padding: 10px 0;
border-top: 1px solid #e1e1e3;
}
.snapshot-detail strong {
display: block;
margin-bottom: 4px;
color: var(--muted);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.snapshot-detail p,
.snapshot-caveat {
margin: 0;
color: var(--soft-ink);
font-size: 11px;
line-height: 1.5;
overflow-wrap: anywhere;
}
.snapshot-caveat {
margin-top: 8px;
color: var(--muted);
font-size: 10px;
}
.state-snapshot > a {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding-top: 11px;
border-top: 1px solid var(--ink);
color: var(--red);
font-size: 11px;
font-weight: 900;
text-decoration: none;
}
.state-snapshot > a svg {
width: 15px;
height: 15px;
}
.status-band {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: color-mix(in oklab, var(--wash) 62%, white);
}
.ccg-page .status-band .shell {
width: 100%;
}
.status-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.status-grid > div {
min-height: 112px;
padding: 18px 22px;
border-left: 1px solid var(--line);
}
.status-grid > div:first-child {
border-left: 0;
}
.status-stat strong,
.status-stat span,
.status-stat small {
display: block;
}
.status-stat strong {
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: 38px;
line-height: 1;
letter-spacing: -0.04em;
}
.status-stat.adult strong { color: var(--adult); }
.status-stat.medical strong { color: var(--medical); }
.status-stat.limited strong { color: #a8790f; }
.status-stat.prohibited strong { color: var(--prohibited); }
.status-stat span {
margin-top: 7px;
font-size: 12px;
font-weight: 900;
}
.status-stat small {
margin-top: 4px;
color: var(--muted);
font-size: 8px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.review-stat {
display: flex;
align-items: center;
gap: 14px;
}
.review-stat > svg {
flex: 0 0 auto;
width: 25px;
height: 25px;
}
.review-stat span {
color: var(--muted);
font-size: 10px;
line-height: 1.4;
}
.review-stat strong {
display: block;
margin-top: 2px;
color: var(--ink);
font-size: 12px;
}
.methodology {
position: relative;
overflow: hidden;
background: #0d0d0e;
color: #ffffff;
}
.methodology::before {
content: "POLICY";
position: absolute;
top: -38px;
left: 27%;
color: rgba(240, 0, 0, 0.15);
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(120px, 17vw, 270px);
letter-spacing: -0.08em;
line-height: 1;
pointer-events: none;
}
.methodology-layout {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: clamp(40px, 6vw, 100px);
min-height: 265px;
padding-block: 45px;
align-items: center;
}
.methodology h2,
.employer-title h2,
.faq-heading h2,
.sources-layout h2 {
margin: 0;
font-family: "Archivo Black", "Arial Black", sans-serif;
letter-spacing: -0.055em;
text-wrap: balance;
}
.methodology h2 {
max-width: 700px;
font-size: clamp(36px, 3.6vw, 62px);
line-height: 0.98;
}
.methodology-copy {
position: relative;
z-index: 1;
}
.methodology-copy p {
margin: 0 0 24px;
color: #c4c4c7;
font-size: 14px;
line-height: 1.55;
}
.methodology-copy a,
.employer-title > a {
display: inline-flex;
align-items: center;
gap: 12px;
padding-bottom: 6px;
border-bottom: 2px solid var(--red);
color: #ffffff;
font-size: 12px;
font-weight: 900;
text-decoration: none;
}
.methodology-copy a svg,
.employer-title > a svg {
width: 16px;
height: 16px;
}
.directory-section {
padding: 82px 0 105px;
background: #ffffff;
}
.directory-shell {
container-type: inline-size;
}
.directory-heading {
display: grid;
grid-template-columns: minmax(420px, 1fr) minmax(300px, 0.7fr);
gap: 50px;
align-items: end;
padding-bottom: 28px;
border-bottom: 1px solid var(--ink);
}
.directory-heading h2 {
margin: 0;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(42px, 4.8vw, 72px);
line-height: 1;
letter-spacing: -0.055em;
}
.directory-heading > p {
max-width: 560px;
margin: 0 0 3px auto;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
text-wrap: pretty;
}
.directory-toolbar {
display: grid;
grid-template-columns: minmax(260px, 0.7fr) minmax(560px, 1.3fr);
gap: 26px;
align-items: center;
padding: 26px 0 12px;
}
.search-control {
width: 100%;
}
.filter-list {
display: flex;
justify-content: flex-end;
gap: 7px;
}
.filter-list button {
display: inline-flex;
min-height: 38px;
align-items: center;
gap: 7px;
padding: 0 12px;
border: 1px solid #d2d2d4;
background: #ffffff;
color: #424246;
font-size: 10px;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.filter-list button span {
color: var(--muted);
}
.filter-list button:hover {
border-color: var(--ink);
}
.filter-list button.active {
border-color: var(--ink);
background: var(--ink);
color: #ffffff;
}
.filter-list button.active span {
color: #cfcfd2;
}
.filter-list button.adult.active { border-color: var(--adult); background: var(--adult); }
.filter-list button.medical.active { border-color: var(--medical); background: var(--medical); }
.filter-list button.limited.active { border-color: var(--limited); background: #9f7411; }
.filter-list button.prohibited.active { border-color: var(--prohibited); background: var(--prohibited); }
.results-count {
margin: 12px 0 9px;
color: var(--muted);
font-size: 11px;
}
.results-count strong {
color: var(--ink);
}
.directory-caveat {
margin: 0 0 16px;
color: var(--muted);
font-size: 11px;
line-height: 1.55;
}
.policy-table {
border-top: 1px solid var(--line);
}
.policy-table-head,
.policy-row {
display: grid;
grid-template-columns: 1.12fr 0.55fr 0.55fr 1.12fr 1.65fr 0.72fr 0.78fr 0.46fr;
gap: 14px;
align-items: center;
}
.policy-table-head {
min-height: 42px;
padding: 0 14px;
background: var(--wash);
color: var(--muted);
font-size: 8px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.policy-row {
min-height: 58px;
padding: 8px 14px;
border-bottom: 1px solid var(--line);
color: var(--soft-ink);
font-size: 12px;
content-visibility: auto;
contain-intrinsic-size: auto 58px;
transition: background 140ms ease;
}
.policy-row:has(.state-name:hover),
.policy-row:has(.state-name:focus-visible) {
background: #fafafa;
}
.policy-row .row-retail {
line-height: 1.45;
overflow-wrap: anywhere;
}
.state-name {
display: flex;
align-items: baseline;
gap: 8px;
width: 100%;
padding: 6px 0;
border: 0;
background: transparent;
color: var(--ink);
text-align: left;
cursor: pointer;
}
.state-name b {
font-size: 13px;
}
.state-name small {
color: var(--muted);
font-size: 9px;
font-weight: 900;
letter-spacing: 0.08em;
}
.state-name-label {
display: flex;
align-items: baseline;
gap: 8px;
}
.state-mobile-status,
.state-mobile-chevron {
display: none;
}
.policy-row > a {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--ink);
font-size: 11px;
font-weight: 700;
text-underline-offset: 4px;
}
.policy-row > a:hover {
color: var(--red);
}
.policy-row > a svg {
width: 14px;
height: 14px;
}
.no-results {
display: grid;
justify-items: start;
gap: 8px;
padding: 45px 20px;
border-bottom: 1px solid var(--line);
}
.no-results span {
color: var(--muted);
font-size: 13px;
}
.no-results button {
margin-top: 7px;
padding: 10px 14px;
border: 0;
background: var(--red);
color: white;
font-weight: 700;
cursor: pointer;
}
.employer-section {
position: relative;
overflow: hidden;
padding: 105px 0;
background: #0a0a0b;
color: #ffffff;
}
.employer-section::after {
content: "DECISION";
position: absolute;
right: -60px;
bottom: -48px;
color: rgba(255, 255, 255, 0.045);
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(130px, 18vw, 280px);
letter-spacing: -0.08em;
line-height: 1;
pointer-events: none;
}
.employer-layout {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(380px, 0.85fr) minmax(560px, 1.15fr);
gap: clamp(60px, 7vw, 120px);
}
.employer-title h2 {
max-width: 650px;
font-size: clamp(40px, 4.2vw, 66px);
line-height: 1.01;
}
.employer-title > p:not(.kicker) {
max-width: 600px;
margin: 27px 0 30px;
color: #bdbdc1;
font-size: 15px;
line-height: 1.65;
}
.decision-rail {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid #3b3b3e;
}
.decision-rail li {
display: grid;
grid-template-columns: 34px 36px 1fr;
gap: 18px;
align-items: start;
padding: 23px 0;
border-bottom: 1px solid #3b3b3e;
}
.decision-rail li > span {
color: #ff5e57;
font-size: 10px;
font-weight: 900;
letter-spacing: 0.12em;
}
.decision-rail li > svg {
width: 26px;
height: 26px;
color: #ffffff;
}
.decision-rail strong {
font-size: 15px;
}
.decision-rail p {
margin: 6px 0 0;
color: #aaaab0;
font-size: 12px;
line-height: 1.48;
}
.faq-section {
padding: 110px 0;
background: #ffffff;
}
.faq-layout {
display: grid;
grid-template-columns: minmax(350px, 0.75fr) minmax(600px, 1.25fr);
gap: clamp(70px, 9vw, 150px);
}
.faq-heading {
position: sticky;
top: 120px;
align-self: start;
}
.faq-heading h2 {
font-size: clamp(42px, 4.6vw, 72px);
line-height: 0.98;
}
.faq-heading > p:last-child {
max-width: 440px;
margin: 26px 0 0;
color: var(--muted);
font-size: 14px;
line-height: 1.6;
}
.faq-list {
border-top: 1px solid var(--ink);
}
.faq-item {
border-bottom: 1px solid var(--line);
}
.faq-item h3 {
margin: 0;
}
.faq-item button {
display: grid;
width: 100%;
grid-template-columns: 38px 1fr 26px;
gap: 15px;
align-items: center;
padding: 25px 0;
border: 0;
background: transparent;
color: var(--ink);
font-size: 17px;
font-weight: 900;
text-align: left;
cursor: pointer;
}
.faq-item button > span {
color: var(--red);
font-size: 10px;
letter-spacing: 0.12em;
}
.faq-item button b {
color: var(--red);
font-size: 25px;
font-weight: 400;
text-align: center;
}
.faq-answer p,
.faq-answer ul,
.faq-answer ol {
max-width: 750px;
margin: -3px 0 27px 53px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
text-wrap: pretty;
}
.faq-answer ul,
.faq-answer ol {
padding-left: 20px;
}
.faq-answer a {
color: var(--red);
text-decoration: underline;
text-underline-offset: 3px;
}
.faq-item.open {
border-bottom-color: var(--ink);
}
.sources-section {
padding: 96px 0;
background: var(--red);
color: #ffffff;
}
.sources-layout {
display: grid;
grid-template-columns: minmax(330px, 0.7fr) minmax(660px, 1.3fr);
gap: clamp(65px, 9vw, 150px);
align-items: start;
}
.sources-layout .kicker.light {
color: #ffffff;
}
.sources-layout h2 {
font-size: clamp(52px, 6vw, 94px);
line-height: 0.9;
}
.sources-layout > div:first-child > p:last-child {
max-width: 490px;
margin: 27px 0 0;
color: #ffe3e2;
font-size: 14px;
line-height: 1.65;
}
.source-list {
border-top: 1px solid rgba(255, 255, 255, 0.72);
}
.source-list a {
display: grid;
grid-template-columns: 40px minmax(210px, 0.8fr) minmax(220px, 1.2fr) 24px;
gap: 16px;
align-items: center;
min-height: 86px;
border-bottom: 1px solid rgba(255, 255, 255, 0.55);
color: #ffffff;
text-decoration: none;
transition: background 150ms ease, padding 150ms ease;
}
.source-list a:hover {
padding-inline: 12px;
background: rgba(255, 255, 255, 0.1);
}
.source-list a > span {
font-size: 9px;
font-weight: 900;
letter-spacing: 0.1em;
}
.source-list strong {
font-size: 14px;
}
.source-list small {
color: #ffe6e4;
font-size: 11px;
}
.source-list svg {
width: 18px;
height: 18px;
}
.ccg-page footer {
padding: 70px 0 25px;
background: #ffffff;
color: var(--ink);
}
.footer-main {
display: grid;
grid-template-columns: 1.5fr 0.7fr 0.9fr 1.35fr;
gap: 70px;
padding-bottom: 55px;
}
.ccg-page footer .brand {
align-self: start;
}
.footer-main > div {
display: grid;
align-content: start;
gap: 10px;
}
.footer-main > div > strong {
margin-bottom: 7px;
color: var(--ink);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.footer-main a,
.footer-main p {
margin: 0;
color: var(--muted);
font-size: 12px;
line-height: 1.55;
}
.footer-main a {
text-decoration: none;
}
.footer-main a:hover {
color: var(--red);
}
.footer-notice {
padding-left: 24px;
border-left: 3px solid var(--red);
}
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 10px;
}
.reveal-section {
content-visibility: auto;
contain-intrinsic-size: auto 760px;
}
@supports (animation-timeline: view()) {
.reveal-section > .shell,
.reveal-section.shell {
animation: section-reveal linear both;
animation-timeline: view();
animation-range: entry 4% cover 25%;
}
@keyframes section-reveal {
from {
transform: translateY(14px);
}
to {
transform: translateY(0);
}
}
}
@container (max-width: 1040px) {
.directory-toolbar {
grid-template-columns: 1fr;
}
.filter-list {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 4px;
}
}
@media (max-width: 1240px) {
.shell {
width: min(100% - 48px, 1160px);
}
.brand {
min-width: 235px;
}
.brand img {
width: 130px;
}
.desktop-nav {
gap: 18px;
}
.desktop-nav a {
font-size: 12px;
}
.hero-layout {
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}
.methodology-layout {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.policy-table-head,
.policy-row {
grid-template-columns: 1fr 0.48fr 0.48fr 1fr 1.5fr 0.67fr 0.72fr 0.42fr;
gap: 10px;
}
}
@media (max-width: 980px) {
.desktop-nav {
display: none;
}
.nav-row {
justify-content: space-between;
}
.nav-cta {
margin-left: auto;
}
.mobile-menu-button {
display: grid;
width: 42px;
height: 42px;
padding: 0;
place-items: center;
border: 1px solid var(--line);
background: #ffffff;
cursor: pointer;
}
.mobile-menu-button svg {
width: 21px;
height: 21px;
}
.mobile-drawer {
position: absolute;
inset: 76px 0 auto;
display: grid;
padding: 10px 24px 22px;
background: #ffffff;
border-top: 1px solid var(--line);
box-shadow: 0 24px 45px rgba(17, 17, 17, 0.12);
}
.mobile-drawer a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--line);
font-size: 14px;
font-weight: 900;
text-decoration: none;
}
.mobile-drawer svg {
width: 17px;
height: 17px;
}
.hero-layout {
grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
min-height: 560px;
gap: 20px;
}
.hero-copy h1 {
font-size: clamp(49px, 7.1vw, 70px);
}
.hero-intro {
font-size: 15px;
}
.map-stage {
min-height: 440px;
}
.state-snapshot {
right: 0;
width: min(310px, calc(100% - 16px));
}
.status-grid {
grid-template-columns: repeat(4, 1fr);
}
.review-stat {
grid-column: span 4;
min-height: 76px !important;
border-top: 1px solid var(--line);
border-left: 0 !important;
}
.methodology-layout {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}
.directory-heading,
.employer-layout,
.faq-layout,
.sources-layout {
grid-template-columns: 1fr;
}
.directory-heading > p {
margin-left: 0;
}
.policy-table {
overflow-x: auto;
}
.policy-table-head,
.policy-row {
min-width: 1080px;
}
.faq-heading {
position: static;
}
.footer-main {
grid-template-columns: 1.2fr 0.7fr 0.9fr;
}
.footer-notice {
grid-column: 1 / -1;
max-width: 560px;
}
}
@media (max-width: 760px) {
.shell {
width: min(100% - 32px, 620px);
}
.site-header {
position: sticky;
}
.nav-row {
min-height: 64px;
gap: 12px;
}
.brand {
min-width: 0;
gap: 10px;
}
.brand img {
width: 92px;
}
.brand span {
display: none;
}
.nav-cta {
min-height: 38px;
padding: 0 12px;
font-size: 10px;
}
.nav-cta svg {
display: none;
}
.mobile-menu-button {
width: 38px;
height: 38px;
}
.mobile-drawer {
inset: 64px 0 auto;
}
.hero-grid-lines {
display: none;
}
.hero-layout {
display: flex;
min-height: 0;
flex-direction: column;
gap: 0;
padding-top: 22px;
padding-bottom: 16px;
}
.hero-copy {
width: 100%;
padding-top: 0;
}
.hero-copy h1 {
max-width: 460px;
font-size: clamp(48px, 14.3vw, 68px);
line-height: 0.91;
}
.hero-intro {
max-width: 500px;
margin: 24px 0 18px;
font-size: 16px;
line-height: 1.5;
}
.hero-search {
grid-template-columns: 1fr;
}
.hero-search label,
.hero-search button {
min-height: 50px;
}
.hero-search button {
justify-content: space-between;
}
.hero-note {
font-size: 10px;
}
.hero-map-wrap {
width: calc(100% + 32px);
margin: 20px -16px 0;
}
.map-stage {
min-height: 430px;
}
.map-canvas {
width: 111%;
padding: 40px 0 92px;
}
.map-legend {
justify-content: flex-start;
gap: 8px 13px;
padding: 0 16px;
font-size: 9px;
}
.map-tooltip {
display: none;
}
.state-snapshot {
position: relative;
right: auto;
bottom: auto;
width: calc(100% - 32px);
margin: -50px 16px 18px;
padding: 18px;
max-height: none;
overflow-y: visible;
}
.snapshot-top {
top: 72px;
}
.status-grid {
grid-template-columns: repeat(2, 1fr);
}
.status-grid > div {
min-height: 100px;
padding: 16px;
border-top: 1px solid var(--line);
}
.status-grid > div:nth-child(odd) {
border-left: 0;
}
.status-stat strong {
font-size: 34px;
}
.status-stat span {
font-size: 10px;
}
.review-stat {
grid-column: span 2;
min-height: 72px !important;
border-left: 0 !important;
}
.methodology-layout {
display: flex;
min-height: 0;
flex-direction: column;
align-items: stretch;
gap: 28px;
padding: 52px 0 58px;
}
.methodology::before {
top: 20px;
left: 20%;
font-size: 130px;
}
.methodology h2,
.employer-title h2,
.faq-heading h2 {
font-size: 39px;
}
.methodology-copy {
grid-column: auto;
}
.directory-section {
padding: 68px 0 78px;
}
.directory-heading {
gap: 22px;
padding-bottom: 24px;
}
.directory-heading h2 {
font-size: 45px;
}
.directory-toolbar {
grid-template-columns: 1fr;
gap: 14px;
}
.filter-list {
justify-content: flex-start;
overflow-x: auto;
padding: 2px 0 7px;
scrollbar-width: thin;
}
.filter-list button {
flex: 0 0 auto;
}
.policy-table {
overflow: visible;
border-top: 0;
}
.policy-table-head {
display: none;
}
.policy-table-body {
display: grid;
gap: 12px;
}
.policy-row {
display: grid;
min-width: 0;
min-height: 0;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0;
border: 1px solid var(--line);
contain-intrinsic-size: auto 250px;
}
.state-name-cell {
grid-column: 1 / -1;
}
.state-name {
justify-content: space-between;
min-height: 52px;
padding: 0 14px;
border-bottom: 1px solid var(--line);
background: var(--wash);
}
.policy-row > span {
display: grid;
min-height: 58px;
align-content: center;
gap: 5px;
padding: 10px 14px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.policy-row > span:nth-of-type(even) {
border-right: 0;
}
.policy-row > span::before {
content: attr(data-label);
color: var(--muted);
font-size: 8px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.policy-row .row-status {
display: flex;
align-content: initial;
align-items: center;
padding-top: 25px;
position: relative;
}
.policy-row .row-status,
.policy-row .row-retail {
grid-column: 1 / -1;
border-right: 0;
}
.policy-row .row-retail {
min-height: 0;
padding-block: 13px;
}
.policy-row .row-status::before {
position: absolute;
top: 10px;
left: 14px;
}
.policy-row > a {
grid-column: 1 / -1;
min-height: 46px;
justify-content: space-between;
padding: 0 14px;
background: var(--ink);
color: #ffffff;
text-decoration: none;
}
.ccg-page.ccg-directory-enhanced .policy-table-body {
gap: 0;
border-top: 1px solid var(--line);
}
.ccg-page.ccg-directory-enhanced .policy-row {
border: 0;
border-bottom: 1px solid var(--line);
content-visibility: visible;
}
.ccg-page.ccg-directory-enhanced .state-name {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 108px) 19px;
align-items: center;
gap: 9px;
min-height: 70px;
border-bottom: 0;
background: #ffffff;
}
.ccg-page.ccg-directory-enhanced .state-name-label {
display: grid;
gap: 3px;
min-width: 0;
}
.ccg-page.ccg-directory-enhanced .state-name-label b {
font-size: 14px;
}
.ccg-page.ccg-directory-enhanced .state-mobile-status {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
color: var(--soft-ink);
font-size: 9px;
font-weight: 700;
line-height: 1.25;
text-align: right;
}
.ccg-page.ccg-directory-enhanced .state-mobile-status i {
flex: 0 0 7px;
width: 7px;
height: 7px;
border-radius: 50%;
}
.ccg-page.ccg-directory-enhanced .state-mobile-chevron {
display: block;
color: var(--muted);
font-size: 19px;
line-height: 1;
text-align: right;
transition: transform 160ms ease, color 160ms ease;
}
.ccg-page.ccg-directory-enhanced .policy-row.is-open .state-mobile-chevron {
transform: rotate(45deg);
color: var(--red);
}
.ccg-page.ccg-directory-enhanced .policy-row.is-open .state-name {
border-bottom: 1px solid var(--line);
}
.ccg-page.ccg-directory-enhanced .policy-row:not(.is-open) > span,
.ccg-page.ccg-directory-enhanced .policy-row:not(.is-open) > a {
display: none;
}
.ccg-page .directory-pagination {
display: grid;
gap: 15px;
padding-top: 22px;
}
.directory-pagination-numbers {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.directory-pagination button {
min-width: 38px;
min-height: 42px;
padding: 0 7px;
border: 1px solid #c8c9cc;
background: #ffffff;
color: var(--soft-ink);
font-size: 11px;
font-weight: 900;
cursor: pointer;
}
.directory-pagination button[aria-current="page"] {
border-color: var(--ink);
background: var(--ink);
color: #ffffff;
}
.directory-pagination button:disabled {
color: #aaaeb1;
cursor: not-allowed;
}
.directory-pagination-controls {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 10px;
}
.directory-pagination-controls button:last-child {
text-align: right;
}
.directory-pagination-controls span {
color: var(--muted);
font-size: 10px;
font-weight: 900;
white-space: nowrap;
}
.employer-section,
.faq-section,
.sources-section {
padding: 76px 0;
}
.employer-layout,
.faq-layout,
.sources-layout {
gap: 52px;
}
.decision-rail li {
grid-template-columns: 30px 30px 1fr;
gap: 12px;
}
.faq-item button {
grid-template-columns: 30px 1fr 24px;
gap: 10px;
padding: 22px 0;
font-size: 15px;
}
.faq-answer p,
.faq-answer ul,
.faq-answer ol {
margin-left: 40px;
}
.sources-layout h2 {
font-size: 58px;
}
.source-list a {
grid-template-columns: 30px 1fr 22px;
min-height: 90px;
}
.source-list small {
grid-column: 2;
}
.source-list svg {
grid-column: 3;
grid-row: 1 / span 2;
}
.ccg-page footer {
padding-top: 55px;
}
.footer-main {
grid-template-columns: 1fr 1fr;
gap: 36px 25px;
}
.footer-main > .brand,
.footer-notice {
grid-column: 1 / -1;
}
.footer-bottom {
flex-direction: column;
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-us-cannabis-compliance {
scroll-behavior: auto;
}
.ccg-page,
.ccg-page *,
.ccg-page *::before,
.ccg-page *::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.policy-field {
opacity: 0.62;
}
}
.ccg-page [hidden] {
display: none !important;
}
.ccg-data-notice {
padding: 14px max(24px, calc((100vw - 1480px) / 2));
border-bottom: 1px solid #e3ad00;
background: #fff7d6;
color: #3f3308;
font-size: 13px;
line-height: 1.5;
}
.ccg-data-notice strong {
font-weight: 900;
}
.source-list a > b {
font-size: 19px;
font-weight: 400;
text-align: right;
} .ccg-page .ccg-updates-section {
padding: clamp(72px, 8vw, 118px) 0 clamp(64px, 7vw, 104px);
background: #f2f2f3;
scroll-margin-top: 88px;
}
.ccg-updates-header {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
align-items: end;
gap: clamp(32px, 7vw, 112px);
}
.ccg-updates-kicker {
margin: 0 0 24px;
color: #c31918;
font-size: 11px;
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
}
.ccg-updates-header h2 {
margin: 0;
color: #111;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(58px, 7vw, 112px);
font-weight: 900;
letter-spacing: -.064em;
line-height: .9;
}
.ccg-updates-intro p {
max-width: 545px;
margin: 0 0 4px;
color: #323236;
font-size: clamp(17px, 1.6vw, 23px);
font-weight: 500;
line-height: 1.45;
}
.ccg-updates-list {
margin-top: clamp(50px, 6vw, 88px);
border-top: 3px solid #111;
}
.ccg-update {
display: grid;
grid-template-columns: 108px minmax(0, 1fr) minmax(205px, .34fr);
gap: clamp(20px, 4vw, 64px);
padding: 32px 0;
border-bottom: 1px solid #c9c9cd;
}
.ccg-update-featured {
padding-block: 44px;
}
.ccg-update-index span {
display: block;
color: #d5241c;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: 27px;
line-height: 1;
}
.ccg-update-index small {
display: block;
margin-top: 11px;
color: #626267;
font-size: 10px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.ccg-update-type {
margin: 0 0 12px;
color: #b91e1a;
font-size: 10px;
font-weight: 900;
letter-spacing: .15em;
text-transform: uppercase;
}
.ccg-update-story h3 {
margin: 0;
color: #111;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(24px, 2.25vw, 38px);
letter-spacing: -.045em;
line-height: 1.1;
}
.ccg-update-story > p:last-child {
max-width: 660px;
margin: 15px 0 0;
color: #4a4a4d;
font-size: 14px;
line-height: 1.65;
}
.ccg-update-facts {
align-self: center;
display: grid;
gap: 13px;
margin: 0;
padding-left: 20px;
border-left: 1px solid #cccdd0;
}
.ccg-update-facts div {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
gap: 10px;
}
.ccg-update-facts dt {
color: #6a6a6f;
font-size: 10px;
line-height: 1.35;
}
.ccg-update-facts dd {
margin: 0;
color: #242427;
font-size: 11px;
font-weight: 700;
line-height: 1.35;
}
.ccg-update-facts a {
color: #b91e1a;
text-decoration: underline;
text-underline-offset: 3px;
}
.ccg-update-facts a:focus-visible {
outline: 3px solid #db241b;
outline-offset: 4px;
}
.ccg-monthly-link:focus-visible {
outline: 3px solid #fff;
outline-offset: 4px;
}
.ccg-monthly-brief {
display: grid;
grid-template-columns: 160px minmax(0, 1fr);
gap: 20px clamp(30px, 5vw, 76px);
margin-top: clamp(52px, 5vw, 72px);
padding: clamp(30px, 4vw, 56px);
background: #111;
color: #fff;
}
.ccg-monthly-date {
display: flex;
flex-direction: column;
align-items: flex-start;
border-left: 3px solid #f00000;
padding-left: 17px;
}
.ccg-monthly-date span {
max-width: 120px;
color: #c4c4c8;
font-size: 10px;
font-weight: 800;
letter-spacing: .1em;
line-height: 1.4;
text-transform: uppercase;
}
.ccg-monthly-date strong {
margin-top: 20px;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(55px, 6vw, 78px);
letter-spacing: -.07em;
line-height: .9;
}
.ccg-monthly-date b {
margin-top: 9px;
color: #c4c4c8;
font-size: 16px;
letter-spacing: .08em;
}
.ccg-monthly-kicker {
margin: 0 0 13px;
color: #ff7770;
font-size: 10px;
font-weight: 900;
letter-spacing: .16em;
text-transform: uppercase;
}
.ccg-monthly-copy h3 {
margin: 0;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(29px, 3vw, 44px);
letter-spacing: -.045em;
line-height: 1.08;
}
.ccg-monthly-copy > p:not(.ccg-monthly-kicker) {
max-width: 660px;
margin: 16px 0 0;
color: #cfcfd2;
font-size: 14px;
line-height: 1.6;
}
.ccg-monthly-link {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 36px;
min-width: 258px;
min-height: 54px;
margin-top: 27px;
padding: 12px 18px;
background: #db241b;
color: #fff;
font-size: 12px;
font-weight: 900;
text-decoration: none;
transition: background-color 180ms ease;
}
.ccg-monthly-link:hover {
background: #b91e1a;
color: #fff;
}
@media (max-width: 1050px) {
.ccg-updates-header { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 32px; }
.ccg-update { grid-template-columns: 72px minmax(0, 1fr); gap: 22px; }
.ccg-update-facts { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; padding: 14px 0 0; border-top: 1px solid #cccdd0; border-left: 0; }
.ccg-update-facts div { grid-template-columns: 1fr; gap: 4px; }
.ccg-monthly-brief { grid-template-columns: 130px minmax(0, 1fr); }
}
@media (max-width: 760px) {
.ccg-page .ccg-updates-section { padding: 72px 0 74px; scroll-margin-top: 68px; }
.ccg-updates-header { grid-template-columns: 1fr; gap: 30px; }
.ccg-updates-header h2 { font-size: clamp(56px, 14vw, 78px); }
.ccg-updates-intro p { font-size: 17px; }
.ccg-updates-list { margin-top: 48px; }
.ccg-update, .ccg-update-featured { grid-template-columns: 1fr; gap: 18px; padding-block: 27px; }
.ccg-update-index { display: flex; align-items: baseline; gap: 12px; }
.ccg-update-index span { font-size: 22px; }
.ccg-update-index small { margin: 0; }
.ccg-update-story h3 { font-size: clamp(24px, 7vw, 34px); }
.ccg-update-facts { grid-column: 1; grid-template-columns: 1fr 1fr; gap: 16px; }
.ccg-monthly-brief { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
.ccg-monthly-date { display: grid; grid-template-columns: auto auto; align-items: end; justify-content: start; gap: 2px 12px; }
.ccg-monthly-date span { grid-column: 1 / -1; }
.ccg-monthly-date strong { margin-top: 8px; font-size: 58px; }
.ccg-monthly-date b { margin: 0 0 3px; }
.ccg-monthly-copy h3 { font-size: clamp(29px, 8vw, 37px); }
.ccg-monthly-link { width: 100%; min-width: 0; }
}
.ccg-disclaimer {
border-top: 1px solid #222226;
border-bottom: 1px solid #222226;
background: #111111;
}
.ccg-disclaimer .shell {
display: grid;
grid-template-columns: 116px minmax(0, 1fr) 178px;
gap: 26px;
align-items: center;
min-height: 96px;
padding-block: 19px;
}
.ccg-disclaimer strong {
display: flex;
align-items: center;
align-self: stretch;
padding-left: 13px;
border-left: 3px solid var(--red);
color: #ff6660;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.ccg-disclaimer p {
margin: 0;
color: #dedee0;
font-size: 13px;
line-height: 1.55;
}
.ccg-disclaimer .ccg-disclaimer-lead {
color: #ffffff;
font-weight: 700;
}
.ccg-disclaimer .ccg-disclaimer-date {
color: #bbbbc0;
font-size: 11px;
line-height: 1.55;
text-align: right;
}
.ccg-disclaimer .ccg-disclaimer-date b {
display: block;
margin-top: 3px;
color: #ffffff;
font-size: 12px;
}
.ccg-contact-section {
padding: clamp(48px, 6vw, 88px) 0;
background: #f2f2f3;
}
.ccg-contact-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 48px;
min-height: 264px;
padding: clamp(28px, 4vw, 56px);
border: 1px solid #d9d9dc;
border-left: 5px solid var(--red);
background: #ffffff;
color: var(--ink);
}
.ccg-contact-kicker {
margin: 0 0 18px;
color: #b91e1a;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ccg-contact-card h2 {
max-width: 760px;
margin: 0 0 18px;
font-family: "Archivo Black", "Arial Black", sans-serif;
font-size: clamp(34px, 3.6vw, 56px);
line-height: 1.04;
letter-spacing: -0.045em;
}
.ccg-contact-description {
max-width: 600px;
margin: 0;
color: var(--soft-ink);
font-size: 14px;
line-height: 1.55;
}
.ccg-page .ccg-contact-button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 32px;
min-width: 190px;
min-height: 56px;
padding: 0 20px;
background: #dc241b;
color: #ffffff;
font-size: 13px;
font-weight: 900;
text-decoration: none;
transition: background-color 180ms ease, color 180ms ease;
}
.ccg-page .ccg-contact-button:hover {
background: #111111;
color: #ffffff;
}
.ccg-page .ccg-contact-button:focus-visible {
outline: 3px solid #111111;
outline-offset: 4px;
}
@media (max-width: 1050px) {
.ccg-disclaimer .shell {
grid-template-columns: 116px minmax(0, 1fr);
gap: 12px 24px;
}
.ccg-disclaimer .ccg-disclaimer-date {
grid-column: 2;
text-align: left;
}
.ccg-disclaimer .ccg-disclaimer-date b {
display: inline;
margin-left: 6px;
}
}
@media (max-width: 760px) {
.ccg-disclaimer .shell,
.ccg-contact-section .shell {
width: calc(100% - 32px);
}
.ccg-disclaimer .shell {
grid-template-columns: 1fr;
gap: 11px;
min-height: 0;
padding-block: 26px;
}
.ccg-disclaimer strong {
min-height: 24px;
}
.ccg-disclaimer .ccg-disclaimer-date {
grid-column: 1;
}
.ccg-contact-section {
padding-block: 40px 56px;
}
.ccg-contact-card {
grid-template-columns: 1fr;
gap: 30px;
min-height: 0;
padding: 28px 24px;
}
.ccg-contact-card h2 {
font-size: clamp(31px, 8vw, 42px);
}
.ccg-page .ccg-contact-button {
width: 100%;
}
}
.ccg-page .ccg-back-to-top {
position: fixed;
z-index: 65;
right: env(safe-area-inset-right, 0px);
bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-width: 72px;
min-height: 52px;
padding: 0 10px;
border: 1px solid #111111;
border-radius: 0;
background: #111111;
box-shadow: 0 7px 24px rgba(0, 0, 0, 0.15);
color: #ffffff;
font-size: 11px;
font-weight: 900;
letter-spacing: 0.02em;
white-space: nowrap;
appearance: none;
cursor: pointer;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease, background-color 180ms ease;
}
.ccg-page .ccg-back-to-top.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.ccg-page .ccg-back-to-top:hover {
border-color: #cf211a;
background: #cf211a;
}
.ccg-page .ccg-back-to-top svg {
flex: 0 0 18px;
width: 18px;
height: 18px;
}
@media (max-width: 760px) {
.ccg-page .ccg-back-to-top {
right: max(16px, calc(env(safe-area-inset-right, 0px) + 12px));
bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 12px));
width: 52px;
min-width: 52px;
min-height: 52px;
padding: 0;
}
.ccg-page .ccg-back-to-top span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.ccg-page .ccg-back-to-top svg {
flex-basis: 21px;
width: 21px;
height: 21px;
}
} body.page-us-cannabis-compliance:has(.ccg-back-to-top.is-visible) .contact-button {
right: calc(env(safe-area-inset-right, 0px) + 6px);
bottom: max(90px, calc(env(safe-area-inset-bottom, 0px) + 84px));
}
@media (max-width: 768px) {
body.page-us-cannabis-compliance:has(.ccg-back-to-top.is-visible) .contact-button {
right: calc(env(safe-area-inset-right, 0px) + 11px);
}
}
@media (max-width: 760px) {
body.page-us-cannabis-compliance:has(.ccg-back-to-top.is-visible) .contact-button {
right: max(17px, calc(env(safe-area-inset-right, 0px) + 13px));
bottom: max(84px, calc(env(safe-area-inset-bottom, 0px) + 80px));
}
}.artools-hub,
.artools-single {
--artools-red: #ef0000;
--artools-ink: #151515;
--artools-muted: #686868;
--artools-line: #e3e3e3;
--artools-paper: #ffffff;
--artools-soft: #f5f5f7;
color: var(--artools-ink);
background: var(--artools-paper);
font-family: Arial, Helvetica, sans-serif;
}
.artools-hub *,
.artools-single * {
box-sizing: border-box;
}
.artools-wrap,
.artools-single-wrap {
width: min(1520px, calc(100% - 80px));
margin-inline: auto;
}
.artools-hero {
padding: 104px 0 88px;
color: #fff;
background: #101010;
}
.artools-eyebrow,
.artools-card-category {
margin: 0 0 14px;
color: var(--artools-red);
font-size: 13px;
font-weight: 800;
letter-spacing: .15em;
text-transform: uppercase;
}
.artools-hero h1,
.artools-section-heading h2,
.artools-card h2,
.artools-single h1 {
margin: 0;
color: inherit;
font-weight: 700;
line-height: 1.04;
}
.artools-hero h1 {
max-width: 850px;
font-size: clamp(48px, 6vw, 88px);
letter-spacing: -.055em;
}
.artools-hero .artools-wrap > p:not(.artools-eyebrow) {
max-width: 760px;
margin: 28px 0 0;
color: #c8c8c8;
font-size: 20px;
line-height: 1.65;
}
.artools-count {
display: inline-flex;
margin-top: 34px;
padding: 9px 14px;
border: 1px solid #3b3b3b;
border-radius: 999px;
color: #ddd;
font-size: 13px;
}
.artools-directory {
padding: 88px 0 110px;
background: var(--artools-soft);
}
.artools-section-heading {
display: grid;
grid-template-columns: 1fr minmax(280px, 520px);
align-items: end;
gap: 50px;
margin-bottom: 42px;
}
.artools-section-heading h2 {
font-size: clamp(36px, 4vw, 56px);
letter-spacing: -.04em;
}
.artools-section-heading > p {
margin: 0;
color: var(--artools-muted);
font-size: 17px;
line-height: 1.65;
}
.artools-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.artools-card {
overflow: hidden;
border: 1px solid var(--artools-line);
border-radius: 18px;
background: var(--artools-paper);
box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
transition: transform .2s ease, box-shadow .2s ease;
}
.artools-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(0, 0, 0, .09);
}
.artools-card-media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #e9e9eb;
}
.artools-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.artools-card:hover .artools-card-media img {
transform: scale(1.025);
}
.artools-card-media > strong {
position: absolute;
top: 16px;
left: 16px;
padding: 7px 10px;
border-radius: 999px;
color: #fff;
background: var(--artools-red);
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
}
.artools-card-placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background: #181818;
color: #fff;
font-size: 14px;
font-weight: 800;
letter-spacing: .24em;
}
.artools-card-copy {
padding: 28px 28px 30px;
}
.artools-card h2 {
font-size: 28px;
letter-spacing: -.03em;
}
.artools-card h2 a,
.artools-card-link {
color: inherit;
text-decoration: none;
}
.artools-card-copy > p:not(.artools-card-category) {
min-height: 78px;
margin: 16px 0 24px;
color: var(--artools-muted);
font-size: 15px;
line-height: 1.7;
}
.artools-card-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
}
.artools-card-link:hover {
color: var(--artools-red);
}
.artools-empty {
padding: 64px;
border: 1px dashed #c9c9c9;
border-radius: 18px;
text-align: center;
background: #fff;
}
.artools-single {
padding: 70px 0 110px;
}
.artools-breadcrumb {
display: flex;
gap: 10px;
margin-bottom: 48px;
color: var(--artools-muted);
font-size: 14px;
}
.artools-breadcrumb a {
color: var(--artools-red);
}
.artools-single-article {
width: min(900px, 100%);
margin-inline: auto;
}
.artools-single h1 {
font-size: clamp(46px, 7vw, 82px);
letter-spacing: -.055em;
}
.artools-single figure {
margin: 44px 0;
}
.artools-single figure img {
width: 100%;
height: auto;
border-radius: 18px;
}
.artools-single-content {
font-size: 18px;
line-height: 1.75;
}
@media (max-width: 980px) {
.artools-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 750px) {
.artools-wrap,
.artools-single-wrap {
width: min(100% - 36px, 680px);
}
.artools-hero {
padding: 72px 0 64px;
}
.artools-hero h1 {
font-size: 48px;
}
.artools-hero .artools-wrap > p:not(.artools-eyebrow) {
font-size: 17px;
}
.artools-directory {
padding: 62px 0 78px;
}
.artools-section-heading,
.artools-grid {
grid-template-columns: 1fr;
}
.artools-section-heading {
gap: 18px;
}
.artools-card-copy > p:not(.artools-card-category) {
min-height: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.artools-card,
.artools-card-media img {
transition: none;
}
}