/* templates/network.css — full namespaced extract from tattoonow-www/tattoonow.css.
* Generated 2026-04-25 by /tmp/extract-network-css-full.mjs.
* Selectors wrapped in [data-template-family="network"] so rules only paint
* on tattoonow.com renders. @keyframes kept global (named scope).
* @media queries recurse and have their inner rules namespaced. */
[data-template-family="network"] {
--brand: #115E7B;
--brand-rgb: 17,94,123;
--cta: #fa9101;
--cta-rgb: 250,145,1;
--cta-hover: #ffc247;
}
[data-template-family="network"] .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;
}
[data-template-family="network"] .view-switcher {
position: sticky;
top: 0;
z-index: 10000;
background: #111;
border-bottom: 1px solid #2a2a2a;
}
[data-template-family="network"] .view-switcher__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.35rem 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
}
[data-template-family="network"] .view-switcher__label {
color: #666;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.65rem;
white-space: nowrap;
}
[data-template-family="network"] .view-switcher__tab {
background: transparent;
border: 1px solid #333;
color: #888;
padding: 0.2rem 0.6rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.72rem;
font-family: inherit;
transition: all 0.15s;
white-space: nowrap;
}
[data-template-family="network"] .view-switcher__tab:hover {
border-color: #555;
color: #ccc;
}
[data-template-family="network"] .view-switcher__tab.active {
background: #115E7B;
border-color: #115E7B;
color: #fff;
font-weight: 600;
}
[data-template-family="network"] .view-switcher__tab[data-audience="collector"].active {
background: #2a7a4f; border-color: #2a7a4f;
}
[data-template-family="network"] .view-switcher__tab[data-audience="artist"].active {
background: #EA9320; border-color: #EA9320;
}
[data-template-family="network"] .view-switcher__tab[data-audience="member"].active {
background: #8e44ad; border-color: #8e44ad;
}
[data-template-family="network"] .view-switcher__sep {
width: 1px;
height: 16px;
background: #333;
margin: 0 0.3rem;
}
[data-template-family="network"] .view-switcher__status {
color: #666;
font-size: 0.7rem;
flex: 1;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-template-family="network"] .view-switcher__reset {
background: transparent;
border: 1px solid #333;
color: #666;
width: 22px;
height: 22px;
border-radius: 4px;
cursor: pointer;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
flex-shrink: 0;
}
[data-template-family="network"] .view-switcher__reset:hover {
border-color: #c0392b;
color: #c0392b;
}
@media (max-width: 640px) {
[data-template-family="network"] .view-switcher__inner {
gap: 0.3rem; padding: 0.3rem 0.5rem;
}
[data-template-family="network"] .view-switcher__label {
display: none;
}
[data-template-family="network"] .view-switcher__status {
display: none;
}
[data-template-family="network"] .view-switcher__tab {
padding: 0.2rem 0.4rem; font-size: 0.65rem;
}
}
[data-template-family="network"] *,
[data-template-family="network"] *::before,
[data-template-family="network"] *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
html[data-template-family="network"] {
scroll-behavior: smooth; font-size: 16px;
}
body[data-template-family="network"] {
font-family: 'Roboto', sans-serif;
background: #0a0a0a;
color: #e0e0e0;
line-height: 1.6;
overflow-x: hidden;
position: relative;
}
[data-template-family="network"] a {
color: #115E7B; text-decoration: none; transition: color 0.2s;
}
[data-template-family="network"] a:hover {
color: #1a7a9e;
}
[data-template-family="network"] img {
max-width: 100%; height: auto; display: block;
}
[data-template-family="network"] h1,
[data-template-family="network"] h2,
[data-template-family="network"] h3,
[data-template-family="network"] h4 {
font-family: 'Roboto Slab', serif; color: #fff; line-height: 1.2;
}
[data-template-family="network"] h1 {
font-size: 2.8rem;
}
[data-template-family="network"] h2 {
font-size: 2rem; margin-bottom: 1rem;
}
[data-template-family="network"] h3 {
font-size: 1.4rem;
}
@media (max-width: 768px) {
[data-template-family="network"] h1 {
font-size: 1.8rem;
}
[data-template-family="network"] h2 {
font-size: 1.5rem;
}
}
[data-template-family="network"] p {
margin-bottom: 1rem;
}
[data-template-family="network"] .mobile-only {
display: none !important;
}
@media (max-width: 768px) {
[data-template-family="network"] .mobile-only {
display: block !important;
}
[data-template-family="network"] .desktop-only {
display: none !important;
}
}
[data-template-family="network"] .mobile-dropdown {
width: 100%;
padding: 0.8rem 1rem;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 8px;
color: #e0e0e0;
font-family: 'Roboto', sans-serif;
font-size: 0.9rem;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 1rem center;
cursor: pointer;
}
[data-template-family="network"] .mobile-dropdown:focus {
outline: none;
border-color: #115E7B;
}
[data-template-family="network"] .partner-accordion {
background: #1a1a1a;
border: 1px solid #2e2e2e;
border-radius: 10px;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .partner-accordion summary {
padding: 0.8rem 1rem;
color: #e0e0e0;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.06em;
cursor: pointer;
list-style: none;
}
[data-template-family="network"] .partner-accordion summary::-webkit-details-marker {
display: none;
}
[data-template-family="network"] .partner-accordion summary::after {
content: '+';
float: right;
color: #666;
font-size: 1.1rem;
}
[data-template-family="network"] .partner-accordion[open] summary::after {
content: '−';
}
[data-template-family="network"] .partner-accordion__link {
display: block;
padding: 0.7rem 1rem;
color: #aaa;
text-decoration: none;
font-size: 0.85rem;
border-top: 1px solid #2e2e2e;
}
[data-template-family="network"] .partner-accordion__link:hover {
color: #fff; background: rgba(17,94,123,0.1);
}
[data-template-family="network"] ul {
list-style: none;
}
[data-template-family="network"] .glow-bg {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
[data-template-family="network"] .glow-bg::before {
content: '';
position: absolute;
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(17,94,123,0.25) 0%, rgba(17,94,123,0.1) 40%, transparent 70%);
left: 20%;
animation: glowDrift 8s ease-in-out infinite;
}
[data-template-family="network"] .glow-bg::after {
content: '';
position: absolute;
width: 500px; height: 500px;
border-radius: 50%;
background: radial-gradient(circle, rgba(17,94,123,0.2) 0%, rgba(17,94,123,0.06) 50%, transparent 70%);
right: 5%;
animation: glowDrift 12s ease-in-out infinite reverse;
animation-delay: -4s;
}
@keyframes glowDrift {
0%, 100% { top: -15%; opacity: 0.5; }
50% { top: 70%; opacity: 1; }
}
[data-template-family="network"] .digital-grid {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 0;
/* Inline SVG circuit-grid pattern. Replaces /mockup/img/circuit-bg.jpg
which was never moved out of the prototype directory and 404'd on
every network home load (2026-05-28 audit). Same visual weight,
zero asset request, immune to CDN cache eviction. */
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
background-position: center;
background-attachment: fixed;
opacity: 0.18;
}
[data-template-family="network"] .ticker {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1002;
background: linear-gradient(135deg, #fa9101, #e07d00);
border-top: none;
overflow: hidden;
white-space: nowrap;
padding: 0.35rem 0;
padding-bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
}
[data-template-family="network"] .ticker__track {
display: inline-flex;
animation: tickerScroll 45s linear infinite;
}
[data-template-family="network"] .ticker__track:hover {
animation-play-state: paused;
}
[data-template-family="network"] .ticker__item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0 1rem;
font-size: 0.75rem;
color: #0a0a0a;
white-space: nowrap;
}
[data-template-family="network"] .ticker__item a {
color: #0a0a0a;
font-weight: 700;
transition: color 0.2s;
text-decoration: underline;
}
[data-template-family="network"] .ticker__item a:hover {
color: #fff;
}
[data-template-family="network"] .ticker__icon {
font-size: 0.7rem;
flex-shrink: 0;
}
[data-template-family="network"] .ticker__icon--blog {
color: #0a0a0a;
}
[data-template-family="network"] .ticker__icon--event {
color: #0a0a0a;
}
[data-template-family="network"] .ticker__icon--partner {
color: #115E7B;
}
[data-template-family="network"] .ticker__note {
color: rgba(0,0,0,0.6);
}
[data-template-family="network"] .ticker__sep {
display: inline-block;
width: 1px;
height: 12px;
background: rgba(0,0,0,0.25);
margin: 0 0.5rem;
vertical-align: middle;
}
@keyframes tickerScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
[data-template-family="network"] .ticker__item {
padding: 0 0.8rem; font-size: 0.7rem;
}
}
/* When the homepage ticker is rendered it sits position:fixed across the
bottom of the viewport, which overlaps the last row of page content on
short screens. Reserve room for it on the body itself. */
body[data-template-family="network"]:has(.ticker) {
padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 769px) {
body[data-template-family="network"]:has(.ticker) {
padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}
}
[data-template-family="network"] .container {
max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
}
[data-template-family="network"] .section {
position: relative; z-index: 1; padding: 5rem 0;
}
[data-template-family="network"] .section--tight {
padding: 3rem 0;
}
[data-template-family="network"] .util-bar {
position: relative;
z-index: 1002;
background: linear-gradient(135deg, #fa9101, #e07d00);
font-size: 0.75rem;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
max-height: 40px;
overflow: hidden;
}
[data-template-family="network"] .util-bar.dismissed {
max-height: 0;
opacity: 0;
padding: 0;
border: none;
}
[data-template-family="network"] .util-bar__inner {
max-width: 1200px;
margin: 0 auto;
padding: 6px 1.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
[data-template-family="network"] .util-bar__promo {
display: flex;
align-items: center;
gap: 0.6rem;
color: #fff;
font-size: 0.75rem;
font-weight: 600;
min-width: 0;
overflow: hidden;
}
[data-template-family="network"] .util-bar__promo-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
[data-template-family="network"] .util-bar__promo-cta {
color: #0a0a0a;
font-weight: 700;
white-space: nowrap;
background: rgba(255,255,255,0.2);
padding: 2px 8px;
border-radius: 3px;
}
[data-template-family="network"] .util-bar__promo:hover .util-bar__promo-cta {
background: rgba(255,255,255,0.35);
}
[data-template-family="network"] .util-bar__links {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
}
[data-template-family="network"] .util-bar__links a {
color: #888;
font-size: 0.75rem;
white-space: nowrap;
transition: color 0.15s;
}
[data-template-family="network"] .util-bar__links a:hover {
color: #fafafa;
}
[data-template-family="network"] .util-bar__avatar {
width: 24px;
height: 24px;
border-radius: 50%;
background: #EA9320;
color: #0a0a0a;
font-size: 0.6rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
[data-template-family="network"] .util-bar__dismiss {
background: none;
border: none;
color: rgba(0,0,0,0.4);
font-size: 1rem;
cursor: pointer;
padding: 0 4px;
line-height: 1;
flex-shrink: 0;
transition: color 0.15s;
}
[data-template-family="network"] .util-bar__dismiss:hover {
color: #fafafa;
}
[data-template-family="network"] .promo-banner {
position: relative;
z-index: 1;
background: linear-gradient(135deg, #fa9101, #e07d00);
border: none;
}
[data-template-family="network"] .promo-banner .container {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding-top: 0.55rem;
padding-bottom: 0.55rem;
}
[data-template-family="network"] .promo-banner__inner {
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
}
[data-template-family="network"] .promo-banner__icon {
color: #0a0a0a;
font-size: 0.85rem;
}
[data-template-family="network"] .promo-banner__text {
color: #0a0a0a;
font-size: 0.8rem;
font-weight: 600;
}
[data-template-family="network"] .promo-banner__cta {
color: #0a0a0a;
font-weight: 700;
font-size: 0.8rem;
white-space: nowrap;
text-decoration: underline;
}
[data-template-family="network"] .promo-banner__inner:hover .promo-banner__cta {
color: #fff;
}
[data-template-family="network"] .promo-banner__dismiss {
background: none;
border: none;
color: rgba(10,10,10,0.4);
font-size: 1rem;
cursor: pointer;
padding: 0 4px;
line-height: 1;
flex-shrink: 0;
transition: color 0.15s;
}
[data-template-family="network"] .promo-banner__dismiss:hover {
color: #0a0a0a;
}
[data-template-family="network"] .nav2 {
position: sticky;
top: 0;
z-index: 1001;
background: #0d1b2a;
backdrop-filter: blur(12px);
border-bottom: none;
}
[data-template-family="network"] .nav2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(250,145,1,0.5);
z-index: 0;
}
[data-template-family="network"] .nav2__inner {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: stretch;
gap: 0;
height: 52px;
}
[data-template-family="network"] .nav2__logo {
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 0;
}
[data-template-family="network"] .nav2__logo img {
height: 38px;
width: auto;
border-radius: 4px;
mix-blend-mode: screen;
}
[data-template-family="network"] .nav2__links {
display: flex;
align-items: stretch;
gap: 0;
margin-left: 1.5rem;
}
[data-template-family="network"] .nav2__links a {
color: rgba(255,255,255,0.85);
font-size: 0.82rem;
font-weight: 500;
padding: 0 0.85rem;
transition: color 0.15s, background 0.15s;
white-space: nowrap;
position: relative;
display: flex;
align-items: center;
border: 1px solid transparent;
border-bottom: none;
margin-bottom: 0;
}
[data-template-family="network"] .nav2__links a:hover {
color: #fff;
background: rgba(255,255,255,0.06);
}
[data-template-family="network"] .nav2__links a.active,
[data-template-family="network"] .nav2__logo.active {
color: #fff;
background: #000;
border-left: 1px solid rgba(250,145,1,0.5);
border-right: 1px solid rgba(250,145,1,0.5);
border-top: 2px solid rgba(250,145,1,0.5);
border-bottom: 1px solid #000;
margin-top: 6px;
margin-bottom: -1px;
padding-bottom: 2px;
border-radius: 6px 6px 0 0;
position: relative;
z-index: 1;
}
[data-template-family="network"] .nav2__badge {
background: #e74c3c;
color: #fff;
font-size: 0.6rem;
font-weight: 700;
padding: 1px 5px;
border-radius: 8px;
margin-left: 4px;
vertical-align: top;
}
[data-template-family="network"] .nav2__caret {
font-size: 0.55rem;
opacity: 0.5;
margin-left: 2px;
transition: transform 0.2s;
}
[data-template-family="network"] .nav2__drawer-footer {
display: none;
}
[data-template-family="network"] .nav2__dropdown {
/* Static (not relative) so the mega-menu panel anchors to
.nav2__inner instead of this narrow, left-clustered item — that's
what lets a wide panel stay on-screen via the viewport-capped
max-width below, instead of clipping off the right edge. */
position: static;
display: flex;
align-items: stretch;
margin-bottom: 0;
}
[data-template-family="network"] .nav2__dropdown > a {
display: flex;
align-items: center;
}
[data-template-family="network"] .nav2__dropdown > a.active {
margin-bottom: -1px;
padding-bottom: 2px;
position: relative;
z-index: 1;
}
[data-template-family="network"] .nav2__dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
max-width: calc(100vw - 1.5rem);
flex-direction: column;
gap: 0.85rem;
background: rgba(16,16,16,0.98);
backdrop-filter: blur(12px);
border: 1px solid rgba(250,145,1,0.2);
border-top: none;
border-radius: 0 0 10px 10px;
padding: 1.35rem 1.6rem;
z-index: 1002;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
[data-template-family="network"] .nav2__dropdown:hover .nav2__dropdown-menu,
[data-template-family="network"] .nav2__dropdown.open .nav2__dropdown-menu {
display: flex;
}
/* Row of group columns inside the mega menu (hub link sits below it) */
[data-template-family="network"] .nav2__dropdown-cols {
display: flex;
flex-wrap: wrap;
gap: 1.25rem 2.25rem;
}
/* Explicit link to the section's hub landing page */
[data-template-family="network"] .nav2__dropdown-overview {
display: block;
padding: 0.6rem 0.7rem;
border-top: 1px solid rgba(255,255,255,0.08);
color: #fa9101;
font-weight: 600;
font-size: 0.82rem;
text-decoration: none;
border-radius: 0 0 6px 6px;
transition: background 0.15s;
}
[data-template-family="network"] .nav2__dropdown-overview:hover {
background: rgba(250,145,1,0.08);
}
/* Mega-menu group column + its label (Phase 1 nav redesign) */
[data-template-family="network"] .nav2__dropdown-group {
display: flex;
flex-direction: column;
min-width: 188px;
}
[data-template-family="network"] .nav2__dropdown-grouplabel {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #fa9101;
opacity: 0.9;
padding: 0 0.7rem;
margin-bottom: 0.55rem;
}
[data-template-family="network"] .nav2__dropdown:hover > a.active ~ .nav2__dropdown-menu {
display: none;
}
[data-template-family="network"] .nav2__dropdown:hover .nav2__caret,
[data-template-family="network"] .nav2__dropdown.open .nav2__caret {
transform: rotate(180deg);
opacity: 0.8;
}
[data-template-family="network"] .nav2__dropdown > a.active .nav2__caret {
display: none;
}
[data-template-family="network"] .nav2__dropdown-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.55rem 0.7rem;
margin-bottom: 0.15rem;
border-radius: 6px;
text-decoration: none;
transition: background 0.15s;
white-space: normal;
}
[data-template-family="network"] .nav2__dropdown-item:hover {
background: rgba(250,145,1,0.06);
}
[data-template-family="network"] .nav2__dropdown-label {
display: block;
color: #e0e0e0;
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.12rem;
}
[data-template-family="network"] .nav2__dropdown-item:hover .nav2__dropdown-label {
color: #fafafa;
}
[data-template-family="network"] .nav2__dropdown-desc {
display: block;
color: rgba(255,255,255,0.5);
font-size: 0.78rem;
line-height: 1.4;
margin-top: 0.05rem;
max-width: 210px;
}
[data-template-family="network"] .subnav {
position: relative;
z-index: 1;
background: rgba(13,27,42,0.6);
border-bottom: 1px solid rgba(250,145,1,0.12);
animation: subnavSlideDown 0.3s ease-out;
}
/* Right-edge fade hints at horizontally-scrollable subnav links on
narrow viewports so users know there's more beyond the visible
strip. pointer-events:none keeps clicks pass-through to the row. */
[data-template-family="network"] .subnav::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 28px;
background: linear-gradient(to right, rgba(13,27,42,0) 0%, rgba(13,27,42,0.85) 60%, rgba(13,27,42,0.95) 100%);
pointer-events: none;
}
@media (min-width: 1024px) {
[data-template-family="network"] .subnav::after {
display: none;
}
}
@keyframes subnavSlideDown {
from { max-height: 0; opacity: 0; }
to { max-height: 40px; opacity: 1; }
}
[data-template-family="network"] .subnav__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
gap: 0;
overflow-x: auto;
scrollbar-width: none;
}
[data-template-family="network"] .subnav__inner::-webkit-scrollbar {
display: none;
}
[data-template-family="network"] .subnav__link {
color: rgba(255,255,255,0.55);
font-size: 0.75rem;
font-weight: 500;
padding: 0.45rem 0.9rem;
white-space: nowrap;
transition: color 0.15s, background 0.15s;
border-bottom: 2px solid transparent;
}
[data-template-family="network"] .subnav__link:hover {
color: rgba(255,255,255,0.85);
background: rgba(255,255,255,0.03);
}
[data-template-family="network"] .subnav__link--active {
color: #EA9320;
border-bottom-color: #EA9320;
}
[data-template-family="network"] .breadcrumbs {
position: relative;
z-index: 1;
padding: 0.6rem 0 0;
}
[data-template-family="network"] .breadcrumbs__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
flex-wrap: wrap;
}
[data-template-family="network"] .breadcrumbs__link {
color: #666;
transition: color 0.15s;
}
[data-template-family="network"] .breadcrumbs__link:hover {
color: #EA9320;
}
[data-template-family="network"] .breadcrumbs__sep {
color: #444;
font-size: 0.65rem;
}
[data-template-family="network"] .breadcrumbs__current {
color: #999;
}
@media (max-width: 768px) {
[data-template-family="network"] .subnav__inner {
padding: 0 1rem;
}
[data-template-family="network"] .subnav__link {
font-size: 0.7rem; padding: 0.4rem 0.7rem;
}
[data-template-family="network"] .breadcrumbs__inner {
padding: 0 1rem; font-size: 0.68rem;
}
}
[data-template-family="network"] .nav2__search {
flex: 1;
max-width: 300px;
position: relative;
display: flex;
align-items: center;
align-self: center;
margin-left: 1rem;
}
[data-template-family="network"] .nav2__search-icon {
position: absolute;
left: 10px;
pointer-events: none;
opacity: 0.5;
}
[data-template-family="network"] .nav2__search-input {
width: 100%;
background: rgba(250,145,1,0.06);
border: 1px solid rgba(250,145,1,0.4);
border-radius: 8px;
padding: 7px 12px 7px 34px;
color: #EA9320;
font-family: 'Roboto', sans-serif;
font-size: 0.82rem;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s, max-width 0.3s;
}
[data-template-family="network"] .nav2__search-input:focus {
border-color: #EA9320;
box-shadow: 0 0 0 2px rgba(234,147,32,0.15);
}
[data-template-family="network"] .nav2__search-input::placeholder {
color: rgba(250,145,1,0.5);
font-size: 0.8rem;
}
[data-template-family="network"] .nav2__actions {
display: flex;
align-items: center;
align-self: center;
gap: 0.6rem;
flex-shrink: 0;
margin-left: auto;
}
[data-template-family="network"] .nav2__help {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.3);
color: rgba(255,255,255,0.7) !important;
font-size: 0.8rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.15s, color 0.15s;
text-decoration: none;
}
[data-template-family="network"] .nav2__help:hover {
border-color: rgba(255,255,255,0.6);
color: #fff !important;
}
[data-template-family="network"] .nav2__login {
color: rgba(255,255,255,0.85) !important;
font-size: 0.8rem;
font-weight: 500;
padding: 5px 14px;
border: 1px solid rgba(255,255,255,0.3);
border-radius: 6px;
white-space: nowrap;
transition: border-color 0.15s, color 0.15s;
}
[data-template-family="network"] .nav2__login:hover {
border-color: rgba(255,255,255,0.6);
color: #fff !important;
}
[data-template-family="network"] .nav2__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background: #EA9320;
color: #0a0a0a;
font-size: 0.65rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
[data-template-family="network"] .nav2__cta {
background: #EA9320;
color: #0a0a0a !important;
font-size: 0.8rem;
font-weight: 600;
padding: 7px 16px;
border-radius: 6px;
white-space: nowrap;
flex-shrink: 0;
transition: background 0.15s, transform 0.1s;
}
[data-template-family="network"] .nav2__cta:hover {
background: #ffc247;
transform: translateY(-1px);
}
[data-template-family="network"] .nav2__toggle {
display: none;
background: none;
border: none;
color: #EA9320;
font-size: 1.4rem;
cursor: pointer;
padding: 4px;
flex-shrink: 0;
align-self: center;
}
/* Audience pill: two-state toggle (Collector / Pro) that flips the
tn_audience cookie. Two mount points share the same .audience-pill
styles but have different visibility rules:
- .nav2__topbar-audience → shown only at ≥768px, sits in the top bar
- .nav2__drawer-audience → shown only at <768px, sits at the top of
the open mobile drawer
Hidden by default so SSR markup doesn't paint a stray pill before
the breakpoint rules attach. */
[data-template-family="network"] .audience-pill {
display: none;
align-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(250,145,1,0.25);
border-radius: 999px;
padding: 2px;
flex-shrink: 0;
align-self: center;
}
[data-template-family="network"] .audience-pill__opt {
appearance: none;
background: transparent;
border: none;
color: rgba(255,255,255,0.65);
font-family: 'Roboto', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 4px 12px;
border-radius: 999px;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
[data-template-family="network"] .audience-pill__opt:hover {
color: #fff;
}
[data-template-family="network"] .audience-pill__opt--active {
background: #EA9320;
color: #0a0a0a;
}
[data-template-family="network"] .nav2__topbar-audience {
margin-left: 0.6rem;
}
@media (min-width: 769px) {
[data-template-family="network"] .nav2__topbar-audience {
display: inline-flex;
}
}
[data-template-family="network"] .style-pills {
margin-bottom: 1.5rem;
}
[data-template-family="network"] .style-pills__track {
display: flex;
gap: 8px;
padding: 6px 0;
flex-wrap: wrap;
}
@media (max-width: 768px) {
[data-template-family="network"] .style-pills__track {
display: none;
}
}
[data-template-family="network"] .style-pill {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 20px;
color: #999;
font-family: 'Roboto', sans-serif;
font-size: 0.75rem;
font-weight: 500;
padding: 5px 14px;
white-space: nowrap;
cursor: pointer;
transition: all 0.15s;
flex-shrink: 0;
}
[data-template-family="network"] .style-pill:hover {
border-color: #555;
color: #fafafa;
}
[data-template-family="network"] .style-pill.active {
background: #EA9320;
border-color: #EA9320;
color: #0a0a0a;
font-weight: 600;
}
@media (max-width: 768px) {
/* The util-bar / promo strip used to be hidden on mobile to save
vertical space. With the ad engine driving this slot (highest-
traffic surface, audience-aware), hiding it on the majority of
traffic was wasted inventory. It's now visible on mobile with
tightened padding + smaller text so it doesn't crowd the nav. */
[data-template-family="network"] .util-bar {
padding: 0.3rem 0.75rem;
}
[data-template-family="network"] .util-bar__promo {
font-size: 0.72rem;
line-height: 1.3;
}
[data-template-family="network"] .util-bar__promo-cta {
display: none;
}
[data-template-family="network"] .nav2__inner {
height: 46px; padding: 0 1rem;
}
[data-template-family="network"] .nav2__logo img {
height: 26px;
}
[data-template-family="network"] .nav2__links {
/* The .nav2 ancestor has backdrop-filter, which creates a new
containing block for fixed-positioned descendants. That means
`inset: 46px 0 0 0` would size the drawer relative to the
46px-tall .nav2 — collapsing it to ~0 vertical pixels and
making the sticky footer overlap the dropdowns. Set an
explicit viewport-sized height (and 100dvh fallback for
dynamic mobile viewports) so the drawer always fills the
screen below the top bar regardless of containing block. */
display: none;
position: fixed;
top: 46px;
left: 0;
right: 0;
height: calc(100vh - 46px);
height: calc(100dvh - 46px);
background: #0c0c0c;
flex-direction: column;
padding: 0.75rem 1rem;
gap: 0.2rem;
border-top: 1px solid #222;
z-index: 1001;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
[data-template-family="network"] .nav2__links.open {
display: flex;
}
[data-template-family="network"] .nav2__links a {
padding: 0.6rem 0.75rem;
font-size: 0.9rem;
width: 100%;
border: none;
margin: 0;
}
[data-template-family="network"] .nav2__links a.active {
background: rgba(234,147,32,0.1);
border: none;
border-left: 3px solid #EA9320;
border-radius: 0;
margin-bottom: 0;
padding-bottom: 0.6rem;
}
[data-template-family="network"] .nav2__search {
flex: 1;
max-width: none;
margin-left: 0.5rem;
}
[data-template-family="network"] .nav2__search-input {
font-size: 0.78rem;
padding: 6px 10px 6px 30px;
}
[data-template-family="network"] .nav2__actions {
gap: 0.4rem;
}
[data-template-family="network"] .nav2__cta {
display: none;
}
[data-template-family="network"] .nav2__login {
display: none;
}
[data-template-family="network"] .nav2__help {
display: none;
}
[data-template-family="network"] .nav2__toggle {
display: block;
}
[data-template-family="network"] .nav2__dropdown {
flex-direction: column;
}
[data-template-family="network"] .nav2__dropdown > a {
justify-content: space-between;
}
[data-template-family="network"] .nav2__dropdown-menu {
display: none;
position: static;
background: transparent;
border: none;
box-shadow: none;
backdrop-filter: none;
padding: 0 0 0.3rem 0.75rem;
min-width: 0;
transform: none;
}
[data-template-family="network"] .nav2__dropdown.open .nav2__dropdown-menu {
display: block;
}
[data-template-family="network"] .nav2__dropdown-cols {
flex-direction: column;
gap: 0;
}
[data-template-family="network"] .nav2__dropdown-overview {
border-top: none;
padding-left: 0.75rem;
font-size: 0.85rem;
}
[data-template-family="network"] .nav2__dropdown-item {
padding: 0.35rem 0.75rem;
}
[data-template-family="network"] .nav2__dropdown-label {
font-size: 0.8rem; color: #999;
}
[data-template-family="network"] .nav2__dropdown-desc {
display: none;
}
[data-template-family="network"] .nav2__caret {
/* Mobile drawer no longer expands a mega-menu — section headers link
straight to their hub page — so the expand caret is hidden. */
display: none !important;
}
[data-template-family="network"] .style-pills__track {
padding: 6px 0; gap: 6px;
}
[data-template-family="network"] .style-pill {
font-size: 0.7rem; padding: 4px 12px;
}
[data-template-family="network"] .nav2__drawer-footer {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 0.6rem;
row-gap: 0.6rem;
margin-top: auto;
padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
position: sticky;
bottom: 0;
background: linear-gradient(to bottom, rgba(12,12,12,0) 0%, #0c0c0c 30%);
}
[data-template-family="network"] .nav2__drawer-login {
text-align: center;
padding: 0.75rem 1rem;
border: 1px solid #333;
border-radius: 6px;
color: #ccc;
font-size: 0.9rem;
font-weight: 500;
}
[data-template-family="network"] .nav2__drawer-cta {
text-align: center;
padding: 0.75rem 1rem;
border-radius: 6px;
background: linear-gradient(135deg, #fa9101, #EA9320);
color: #0a0a0a;
font-size: 0.9rem;
font-weight: 700;
}
[data-template-family="network"] .nav2__drawer-affiliate {
grid-column: 1 / -1;
text-align: center;
padding: 0.4rem;
font-size: 0.78rem;
color: rgba(234,147,32,0.85);
text-decoration: underline;
text-underline-offset: 3px;
}
[data-template-family="network"] .nav2__drawer-audience {
display: flex;
align-self: center;
margin: 0 auto 0.6rem;
}
}
[data-template-family="network"] .btn {
display: inline-block;
padding: 0.8rem 1.8rem;
border-radius: 6px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 0.95rem;
text-align: center;
cursor: pointer;
transition: all 0.25s;
border: none;
}
[data-template-family="network"] .btn--primary {
background: linear-gradient(135deg, #fa9101, #e07d00);
color: #0a0a0a;
}
[data-template-family="network"] .btn--primary:hover {
background: linear-gradient(135deg, #ffc247, #fa9101);
color: #0a0a0a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(17,94,123,0.3);
}
[data-template-family="network"] .btn--secondary {
background: transparent;
color: #115E7B;
border: 2px solid rgba(17,94,123,0.4);
}
[data-template-family="network"] .btn--secondary:hover {
border-color: #115E7B;
background: rgba(17,94,123,0.08);
color: #ffc247;
}
[data-template-family="network"] .btn--teal {
background: linear-gradient(135deg, #115E7B, #0d4a61);
color: #fff;
}
[data-template-family="network"] .btn--teal:hover {
background: linear-gradient(135deg, #1a7a9e, #115E7B);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(17,94,123,0.3);
}
[data-template-family="network"] .hero {
position: relative;
z-index: 1;
min-height: 80vh;
display: flex;
align-items: center;
padding-top: 2rem;
}
[data-template-family="network"] .hero--bg {
background-image: url('https://www.tattoos.gallery/philrobertsontattoos.com/images/gallery/medium/IMG_1359.jpeg');
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
}
[data-template-family="network"] .hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(5,7,10,0.8) 0%, rgba(5,7,10,0.55) 50%, rgba(5,7,10,0.85) 100%);
z-index: 1;
}
[data-template-family="network"] .hero--short {
min-height: 50vh;
}
[data-template-family="network"] .hero__content {
max-width: 700px;
}
[data-template-family="network"] .hero__badge {
display: inline-block;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #115E7B;
border: 1px solid rgba(17,94,123,0.3);
padding: 0.4rem 1rem;
border-radius: 20px;
margin-bottom: 1.5rem;
}
[data-template-family="network"] .hero h1 {
margin-bottom: 1.2rem;
}
[data-template-family="network"] .hero h1 .highlight {
color: #115E7B;
}
[data-template-family="network"] .hero p {
font-size: 1.15rem;
color: #aaa;
margin-bottom: 2rem;
max-width: 550px;
}
[data-template-family="network"] .hero__ctas {
display: flex; gap: 1rem; flex-wrap: wrap;
}
[data-template-family="network"] .card {
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s;
}
[data-template-family="network"] .card:hover {
transform: translateY(-4px);
border-color: rgba(17,94,123,0.4);
}
[data-template-family="network"] .card--hover {
cursor: pointer;
}
[data-template-family="network"] .card--hover:hover {
box-shadow: 0 8px 30px rgba(17,94,123,0.15);
}
[data-template-family="network"] .card--hover:hover .card__img {
transform: scale(1.05);
}
[data-template-family="network"] .card__img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
transition: transform 0.4s ease;
}
[data-template-family="network"] .card__vote button.voted {
color: #fa9101; transform: scale(1.2);
}
[data-template-family="network"] .card__body {
padding: 1.2rem;
}
[data-template-family="network"] .card__title {
font-size: 1rem; margin-bottom: 0.3rem;
}
[data-template-family="network"] .card__meta {
font-size: 0.8rem;
color: #888;
}
[data-template-family="network"] .card__vote {
display: flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.5rem;
font-size: 0.85rem;
color: #115E7B;
}
[data-template-family="network"] .card__vote button {
background: none;
border: 1px solid rgba(17,94,123,0.3);
color: #115E7B;
width: 32px; height: 32px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
[data-template-family="network"] .card__vote button:hover {
background: rgba(17,94,123,0.15);
border-color: #fa9101;
}
[data-template-family="network"] .card__vote button.voted {
background: #fa9101;
color: #0a0a0a;
border-color: #fa9101;
}
[data-template-family="network"] .grid {
display: grid; gap: 1.5rem;
}
[data-template-family="network"] .grid--2 {
grid-template-columns: repeat(2, 1fr);
}
[data-template-family="network"] .grid--3 {
grid-template-columns: repeat(3, 1fr);
}
[data-template-family="network"] .grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
[data-template-family="network"] .grid--2,
[data-template-family="network"] .grid--3,
[data-template-family="network"] .grid--4 {
grid-template-columns: 1fr;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
[data-template-family="network"] .grid--3,
[data-template-family="network"] .grid--4 {
grid-template-columns: repeat(2, 1fr);
}
}
[data-template-family="network"] .gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
@media (max-width: 480px) {
[data-template-family="network"] .gallery-grid {
grid-template-columns: repeat(2, 1fr); gap: 0.75rem;
}
}
[data-template-family="network"] .section-header {
text-align: center;
margin-bottom: 3rem;
}
[data-template-family="network"] .section-header p {
color: #888;
max-width: 600px;
margin: 0.5rem auto 0;
}
[data-template-family="network"] .ask-section {
background: rgba(17,94,123,0.08);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 16px;
padding: 3rem;
text-align: center;
max-width: 100%;
overflow: hidden;
}
@media (max-width: 768px) {
[data-template-family="network"] .ask-section {
padding: 1.5rem 1rem; border-radius: 10px;
}
[data-template-family="network"] .ask-section__search {
flex-direction: column; gap: 0.5rem;
}
[data-template-family="network"] .ask-section__input {
border-right: 1px solid rgba(17,94,123,0.3); border-radius: 6px;
}
[data-template-family="network"] .ask-section__btn {
border-radius: 6px;
}
}
[data-template-family="network"] .ask-section__search {
display: flex;
max-width: 500px;
margin: 1.5rem auto 1rem;
gap: 0;
}
[data-template-family="network"] .ask-section__input {
flex: 1;
padding: 0.8rem 1.2rem;
background: rgba(10,10,10,0.8);
border: 1px solid rgba(17,94,123,0.3);
border-right: none;
border-radius: 6px 0 0 6px;
color: #e0e0e0;
font-size: 0.95rem;
font-family: 'Roboto', sans-serif;
}
[data-template-family="network"] .ask-section__input::placeholder {
color: #666;
}
[data-template-family="network"] .ask-section__btn {
padding: 0.8rem 1.5rem;
background: #115E7B;
border: 1px solid rgba(17,94,123,0.3);
border-radius: 0 6px 6px 0;
color: #fff;
font-weight: 600;
cursor: pointer;
transition: background 0.2s;
}
[data-template-family="network"] .ask-section__btn:hover {
background: #1a7a9e;
}
[data-template-family="network"] .ask-topics {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 1rem;
}
[data-template-family="network"] .ask-topics a {
font-size: 0.8rem;
padding: 0.3rem 0.8rem;
border: 1px solid rgba(17,94,123,0.3);
border-radius: 20px;
color: #888;
transition: all 0.2s;
}
[data-template-family="network"] .ask-topics a:hover {
border-color: #115E7B;
color: #fff;
background: rgba(17,94,123,0.15);
}
[data-template-family="network"] .swipe-widget {
position: relative;
max-width: 360px;
margin: 0 auto;
}
[data-template-family="network"] .swipe-widget__card {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/4;
cursor: grab;
touch-action: none;
user-select: none;
}
[data-template-family="network"] .swipe-widget__card img {
width: 100%;
height: 100%;
object-fit: cover;
}
[data-template-family="network"] .swipe-widget__overlay {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1.5rem;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
}
[data-template-family="network"] .swipe-widget__actions {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1rem;
}
[data-template-family="network"] .swipe-widget__btn {
width: 56px; height: 56px;
border-radius: 50%;
border: 2px solid;
background: rgba(10,10,10,0.7);
font-size: 1.4rem;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
[data-template-family="network"] .swipe-widget__btn--skip {
border-color: rgba(255,255,255,0.2);
color: #888;
}
[data-template-family="network"] .swipe-widget__btn--skip:hover {
border-color: #fff; color: #fff;
}
[data-template-family="network"] .swipe-widget__btn--vote {
border-color: rgba(17,94,123,0.5);
color: #115E7B;
}
[data-template-family="network"] .swipe-widget__btn--vote:hover {
border-color: #115E7B;
background: rgba(17,94,123,0.15);
transform: scale(1.1);
}
[data-template-family="network"] .swipe-widget__card {
touch-action: pan-y;
overflow: hidden;
}
[data-template-family="network"] .swipe-widget__card img {
transition: transform 0.1s ease-out;
transform-origin: center center;
will-change: transform;
}
[data-template-family="network"] .card__img-wrap {
overflow: hidden;
touch-action: pan-y;
position: relative;
cursor: pointer;
}
[data-template-family="network"] .card__img-wrap img {
transition: transform 0.1s ease-out;
transform-origin: center center;
will-change: transform;
}
[data-template-family="network"] .readers-choice {
position: relative;
border: 1px solid rgba(17,94,123,0.2);
border-radius: 16px;
padding: 2.5rem 2rem;
background: linear-gradient(180deg, rgba(17,94,123,0.06), rgba(20,20,20,0.8));
overflow: hidden;
}
[data-template-family="network"] .readers-choice::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, #115E7B, transparent);
}
[data-template-family="network"] .readers-choice__badge {
display: inline-block;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: #0a0a0a;
background: #fa9101;
padding: 0.3rem 0.8rem;
border-radius: 4px;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .readers-choice__winner {
display: flex;
gap: 1.5rem;
align-items: center;
margin-top: 1rem;
}
[data-template-family="network"] .readers-choice__img {
width: 120px;
height: 120px;
border-radius: 12px;
object-fit: cover;
border: 2px solid rgba(17,94,123,0.3);
flex-shrink: 0;
}
[data-template-family="network"] .readers-choice__info {
flex: 1;
}
[data-template-family="network"] .readers-choice__category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #115E7B;
margin-bottom: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .readers-choice__winner {
flex-direction: column; text-align: center;
}
[data-template-family="network"] .readers-choice__img {
margin: 0 auto;
}
}
[data-template-family="network"] .filters {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 2rem;
}
[data-template-family="network"] .filters__group {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
align-items: center;
}
[data-template-family="network"] .filters__label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #666;
margin-right: 0.5rem;
}
[data-template-family="network"] .filter-btn {
padding: 0.4rem 1rem;
border: 1px solid rgba(17,94,123,0.2);
border-radius: 20px;
background: transparent;
color: #aaa;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.2s;
font-family: 'Roboto', sans-serif;
}
[data-template-family="network"] .filter-btn:hover {
border-color: #115E7B; color: #115E7B;
}
[data-template-family="network"] .filter-btn.active {
background: #fa9101;
color: #0a0a0a;
border-color: #fa9101;
}
[data-template-family="network"] .event-card {
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
padding: 1.5rem;
transition: border-color 0.3s;
}
[data-template-family="network"] .event-card:hover {
border-color: rgba(17,94,123,0.4);
}
[data-template-family="network"] .event-card--featured {
border-color: rgba(17,94,123,0.3);
padding: 2rem;
}
[data-template-family="network"] .event-card__date {
font-size: 0.8rem;
color: #115E7B;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .event-card__location {
font-size: 0.85rem;
color: #888;
margin-top: 0.3rem;
}
[data-template-family="network"] .engage-card {
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 16px;
padding: 2.5rem 2rem;
text-align: center;
transition: border-color 0.3s, transform 0.3s;
}
[data-template-family="network"] .engage-card:hover {
border-color: rgba(17,94,123,0.4);
transform: translateY(-4px);
}
[data-template-family="network"] .engage-card--featured {
border-color: rgba(17,94,123,0.3);
background: linear-gradient(180deg, rgba(17,94,123,0.06), rgba(20,20,20,0.8));
}
[data-template-family="network"] .engage-card__icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
[data-template-family="network"] .engage-card__label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #115E7B;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .engage-card__desc {
color: #aaa;
font-size: 0.95rem;
}
[data-template-family="network"] .quote-card {
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
padding: 1.5rem;
display: flex;
gap: 1.2rem;
align-items: center;
}
[data-template-family="network"] .quote-card__rank {
font-family: 'Roboto Slab', serif;
font-size: 2rem;
color: rgba(17,94,123,0.3);
font-weight: 700;
flex-shrink: 0;
width: 50px;
text-align: center;
}
[data-template-family="network"] .quote-card__img {
width: 80px; height: 80px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
}
[data-template-family="network"] .quote-card__body {
flex: 1;
}
[data-template-family="network"] .quote-card__votes {
font-size: 0.8rem;
color: #115E7B;
margin-top: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .quote-card {
flex-direction: column;
align-items: flex-start;
gap: 0.8rem;
}
[data-template-family="network"] .quote-card__rank {
font-size: 1.2rem;
width: auto;
}
[data-template-family="network"] .quote-card__img {
width: 100%;
height: 200px;
border-radius: 8px;
}
}
[data-template-family="network"] .footer {
position: relative;
z-index: 1;
border-top: 1px solid rgba(17,94,123,0.15);
padding: 3rem 0 1.5rem;
margin-top: 2rem;
}
[data-template-family="network"] .footer__grid {
display: grid;
grid-template-columns: 2fr repeat(3, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
[data-template-family="network"] .footer__brand {
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
color: #115E7B;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .footer__tagline {
font-size: 0.85rem;
color: #666;
}
[data-template-family="network"] .footer__heading {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 2px;
color: #888;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .footer__links a {
display: block;
color: #aaa;
font-size: 0.85rem;
padding: 0.2rem 0;
}
[data-template-family="network"] .footer__links a:hover {
color: #1a7a9e;
}
[data-template-family="network"] .footer__bottom {
border-top: 1px solid rgba(255,255,255,0.05);
padding-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: #555;
}
[data-template-family="network"] .footer__social {
display: flex; gap: 1rem;
}
[data-template-family="network"] .footer__social a {
color: #666; font-size: 1.1rem;
}
[data-template-family="network"] .footer__social a:hover {
color: #1a7a9e;
}
@media (max-width: 768px) {
[data-template-family="network"] .footer__grid {
grid-template-columns: 1fr; gap: 1.5rem;
}
[data-template-family="network"] .footer__bottom {
flex-direction: column; gap: 0.5rem; text-align: center;
}
}
[data-template-family="network"] .artist-map {
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(17,94,123,0.2);
position: relative;
}
[data-template-family="network"] .artist-map__container {
height: 450px;
width: 100%;
background: #0d1117;
}
[data-template-family="network"] .artist-map__pin-count {
position: absolute;
top: 12px; right: 12px;
background: rgba(10,10,10,0.85);
color: #115E7B;
font-size: 0.8rem;
font-weight: 600;
padding: 0.4rem 0.8rem;
border-radius: 8px;
z-index: 500;
border: 1px solid rgba(17,94,123,0.2);
}
[data-template-family="network"] .leaflet-popup-content-wrapper {
background: #141414 !important;
color: #e0e0e0 !important;
border: 1px solid rgba(17,94,123,0.25) !important;
border-radius: 8px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
}
[data-template-family="network"] .leaflet-popup-tip {
background: #141414 !important;
}
[data-template-family="network"] .leaflet-popup-content a {
color: #115E7B !important;
}
[data-template-family="network"] .leaflet-popup-content .popup-name {
font-family: 'Roboto Slab', serif;
font-size: 0.95rem;
font-weight: 700;
color: #fff;
}
[data-template-family="network"] .leaflet-popup-content .popup-meta {
font-size: 0.8rem;
color: #888;
margin-top: 0.2rem;
}
[data-template-family="network"] .leaflet-popup-content .popup-votes {
font-size: 0.8rem;
color: #115E7B;
margin-top: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .artist-map__container {
height: 300px;
}
}
[data-template-family="network"] .audit-scorecard {
background: rgba(20,20,20,0.9);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
padding: 1.5rem;
}
[data-template-family="network"] .audit-scorecard__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(17,94,123,0.15);
}
[data-template-family="network"] .audit-scorecard__title {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
color: #888;
}
[data-template-family="network"] .audit-scorecard__overall {
font-family: 'Roboto Slab', serif;
font-size: 2rem;
font-weight: 700;
color: #115E7B;
}
[data-template-family="network"] .audit-scorecard__overall span {
font-size: 1rem;
color: #555;
}
[data-template-family="network"] .audit-scorecard__pillar {
display: grid;
grid-template-columns: 140px 1fr 45px;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .audit-scorecard__label {
font-size: 0.8rem;
color: #aaa;
}
[data-template-family="network"] .audit-scorecard__bar {
height: 8px;
background: rgba(255,255,255,0.06);
border-radius: 4px;
overflow: hidden;
}
[data-template-family="network"] .audit-scorecard__fill {
height: 100%;
border-radius: 4px;
background: linear-gradient(90deg, #0d4a61, #115E7B);
transition: width 1s ease;
}
[data-template-family="network"] .audit-scorecard__score {
font-size: 0.8rem;
font-weight: 600;
color: #115E7B;
text-align: right;
}
@media (max-width: 768px) {
[data-template-family="network"] .audit-scorecard__pillar {
grid-template-columns: 110px 1fr 40px;
}
}
[data-template-family="network"] .for-artists-only {
display: none !important;
}
[data-template-family="network"] .for-collectors-default {
display: block !important;
}
[data-template-family="network"] .for-collectors-default.grid--4 {
display: grid !important;
}
[data-template-family="network"] .for-members-only {
display: none !important;
}
body[data-template-family="network"].audience-artist .for-artists-only {
display: block !important;
}
body[data-template-family="network"].audience-artist .for-collectors-default {
display: none !important;
}
body[data-template-family="network"].audience-collector .for-artists-only {
display: none !important;
}
body[data-template-family="network"].audience-collector .for-collectors-default {
display: block !important;
}
body[data-template-family="network"].audience-member .for-artists-only {
display: block !important;
}
body[data-template-family="network"].audience-member .for-collectors-default {
display: none !important;
}
body[data-template-family="network"].audience-member .for-members-only {
display: block !important;
}
html[data-audience="artist"] [data-template-family="network"] .for-artists-only {
display: block !important;
}
html[data-audience="artist"] [data-template-family="network"] .for-collectors-default {
display: none !important;
}
html[data-audience="collector"] [data-template-family="network"] .for-artists-only {
display: none !important;
}
html[data-audience="collector"] [data-template-family="network"] .for-collectors-default {
display: block !important;
}
[data-template-family="network"] html[data-audience="member"] .for-artists-only {
display: block !important;
}
[data-template-family="network"] html[data-audience="member"] .for-collectors-default {
display: none !important;
}
[data-template-family="network"] html[data-audience="member"] .for-members-only {
display: block !important;
}
/* --- Stub segments: event producers + tattoo pros --------------------
Both are professional audiences — show them the professional hero
(.for-artists-only) and hide the collector one. Segment-specific
content (.for-event-producers-only / .for-tattoo-pros-only) is
hidden by default and revealed per-segment below. */
[data-template-family="network"] .for-event-producers-only,
[data-template-family="network"] .for-tattoo-pros-only {
display: none !important;
}
body[data-template-family="network"].audience-event-producer .for-artists-only,
body[data-template-family="network"].audience-tattoo-pro .for-artists-only {
display: block !important;
}
body[data-template-family="network"].audience-event-producer .for-collectors-default,
body[data-template-family="network"].audience-tattoo-pro .for-collectors-default {
display: none !important;
}
body[data-template-family="network"].audience-event-producer .for-event-producers-only {
display: block !important;
}
body[data-template-family="network"].audience-tattoo-pro .for-tattoo-pros-only {
display: block !important;
}
/* Pre-hydration parity (html[data-audience] set by script). */
html[data-audience="event-producer"] [data-template-family="network"] .for-artists-only,
html[data-audience="tattoo-pro"] [data-template-family="network"] .for-artists-only {
display: block !important;
}
html[data-audience="event-producer"] [data-template-family="network"] .for-collectors-default,
html[data-audience="tattoo-pro"] [data-template-family="network"] .for-collectors-default {
display: none !important;
}
html[data-audience="event-producer"] [data-template-family="network"] .for-event-producers-only {
display: block !important;
}
html[data-audience="tattoo-pro"] [data-template-family="network"] .for-tattoo-pros-only {
display: block !important;
}
[data-template-family="network"] .faq-list {
display: grid !important;
}
[data-template-family="network"] .for-collectors-default.faq-list {
display: grid !important;
}
[data-template-family="network"] .for-artists-only.faq-list {
display: grid !important;
}
body[data-template-family="network"].audience-artist .for-collectors-default.faq-list {
display: none !important;
}
body[data-template-family="network"].audience-collector .for-collectors-default.faq-list {
display: grid !important;
}
[data-template-family="network"] .how-it-works {
display: grid !important;
}
[data-template-family="network"] .for-collectors-default.how-it-works {
display: grid !important;
}
[data-template-family="network"] .for-artists-only.how-it-works {
display: grid !important;
}
body[data-template-family="network"].audience-artist .for-collectors-default.how-it-works {
display: none !important;
}
body[data-template-family="network"].audience-collector .for-collectors-default.how-it-works {
display: grid !important;
}
body[data-template-family="network"].audience-member .for-collectors-default.faq-list {
display: none !important;
}
[data-template-family="network"] html[data-audience="artist"] .for-collectors-default.faq-list {
display: none !important;
}
[data-template-family="network"] html[data-audience="collector"] .for-collectors-default.faq-list {
display: grid !important;
}
[data-template-family="network"] html[data-audience="member"] .for-collectors-default.faq-list {
display: none !important;
}
[data-template-family="network"] .grid--4 {
display: grid !important;
}
[data-template-family="network"] .for-collectors-default.grid--4 {
display: grid !important;
}
[data-template-family="network"] .for-artists-only.grid--4 {
display: grid !important;
}
body[data-template-family="network"].audience-artist .for-collectors-default.grid--4 {
display: none !important;
}
body[data-template-family="network"].audience-collector .for-collectors-default.grid--4 {
display: grid !important;
}
[data-template-family="network"] .audience-switch {
display: none;
font-size: 0.75rem;
color: #888;
cursor: pointer;
margin-left: 1rem;
border: 1px solid rgba(255,255,255,0.1);
padding: 0.2rem 0.6rem;
border-radius: 12px;
transition: color 0.2s, border-color 0.2s;
}
[data-template-family="network"] .audience-switch.visible {
display: inline-block;
}
[data-template-family="network"] .audience-switch:hover {
color: #115E7B; border-color: rgba(17,94,123,0.3);
}
[data-template-family="network"] .footer__newsletter {
margin-top: 1rem;
}
[data-template-family="network"] .footer__newsletter-form {
display: flex;
gap: 0;
max-width: 280px;
margin-top: 0.5rem;
}
[data-template-family="network"] .footer__newsletter-input {
flex: 1;
padding: 0.5rem 0.8rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-right: none;
border-radius: 4px 0 0 4px;
color: #e0e0e0;
font-size: 0.85rem;
font-family: 'Roboto', sans-serif;
}
[data-template-family="network"] .footer__newsletter-btn {
padding: 0.5rem 0.8rem;
background: #fa9101;
border: 1px solid #fa9101;
border-radius: 0 4px 4px 0;
color: #0a0a0a;
font-weight: 600;
font-size: 0.8rem;
cursor: pointer;
}
[data-template-family="network"] .gallery-toolbar {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10,10,10,0.95);
backdrop-filter: blur(8px);
padding: 0.4rem 0;
border-bottom: 1px solid rgba(17,94,123,0.15);
}
[data-template-family="network"] .gallery-toolbar__row {
display: flex;
align-items: center;
gap: 0.5rem;
}
[data-template-family="network"] .gallery-select {
appearance: none;
-webkit-appearance: none;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 6px;
color: #ccc;
padding: 0.3rem 1.6rem 0.3rem 0.5rem;
font-family: 'Roboto', sans-serif;
font-size: 0.75rem;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23fa9101'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.4rem center;
}
[data-template-family="network"] .gallery-select:focus {
outline: none; border-color: #115E7B;
}
[data-template-family="network"] .gallery-select option {
background: #141414; color: #e0e0e0;
}
[data-template-family="network"] .gallery-gear {
position: fixed;
bottom: 1.2rem;
right: 1.2rem;
z-index: 200;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid rgba(17,94,123,0.25);
background: rgba(10,10,10,0.85);
backdrop-filter: blur(10px);
color: #115E7B;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 2px 12px rgba(0,0,0,0.4);
transition: transform 0.3s, border-color 0.3s;
display: flex; align-items: center; justify-content: center;
}
[data-template-family="network"] .gallery-gear:hover {
transform: rotate(60deg); border-color: #115E7B;
}
[data-template-family="network"] .gallery-gear-menu {
position: fixed;
bottom: 4rem;
right: 1.2rem;
z-index: 200;
display: none;
flex-direction: column;
gap: 0.25rem;
background: rgba(10,10,10,0.92);
backdrop-filter: blur(10px);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 10px;
padding: 0.3rem;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
[data-template-family="network"] .gallery-gear-menu.open {
display: flex;
}
[data-template-family="network"] .gallery-gear-opt {
padding: 0.45rem 1rem;
border: none;
background: transparent;
color: #888;
font-family: 'Roboto', sans-serif;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
border-radius: 8px;
transition: all 0.15s;
text-align: left;
white-space: nowrap;
}
[data-template-family="network"] .gallery-gear-opt.active {
background: rgba(17,94,123,0.15); color: #115E7B;
}
[data-template-family="network"] .gallery-gear-opt:hover:not(.active) {
color: #e0e0e0;
}
@media (max-width: 768px) {
[data-template-family="network"] .gallery-toolbar {
top: 0;
}
[data-template-family="network"] .gallery-toolbar__row {
flex-wrap: nowrap; gap: 0.3rem;
}
[data-template-family="network"] .gallery-select {
flex: 1; font-size: 0.8rem; padding: 0.4rem 1.4rem 0.4rem 0.5rem;
}
[data-template-family="network"] .grid--4 {
grid-template-columns: 1fr; gap: 0.8rem;
}
}
[data-template-family="network"] .testimonial {
background: rgba(20,20,20,0.6);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
padding: 1.5rem;
}
[data-template-family="network"] .testimonial__stars {
color: #fa9101;
font-size: 1rem;
letter-spacing: 2px;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .testimonial__text {
color: #ccc;
font-size: 0.9rem;
font-style: italic;
line-height: 1.6;
margin-bottom: 1rem;
}
[data-template-family="network"] .testimonial__author {
color: #e0e0e0;
font-weight: 600;
font-size: 0.85rem;
}
[data-template-family="network"] .testimonial__type {
color: #115E7B;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0.2rem;
}
[data-template-family="network"] .faq {
max-width: 750px; margin: 0 auto;
}
[data-template-family="network"] .faq__item {
border: 1px solid rgba(17,94,123,0.2);
border-radius: 8px;
margin-bottom: 0.8rem;
background: rgba(20,20,20,0.6);
overflow: hidden;
}
[data-template-family="network"] .faq__item[open] {
border-color: rgba(17,94,123,0.35);
}
[data-template-family="network"] .faq__q {
padding: 1rem 1.2rem;
font-family: 'Roboto Slab', serif;
font-size: 1rem;
font-weight: 600;
color: #e0e0e0;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
}
[data-template-family="network"] .faq__q::-webkit-details-marker {
display: none;
}
[data-template-family="network"] .faq__q::after {
content: '+'; color: #115E7B; font-size: 1.2rem; flex-shrink: 0; margin-left: 1rem;
}
[data-template-family="network"] .faq__item[open] .faq__q::after {
content: '\2212';
}
[data-template-family="network"] .faq__a {
padding: 0 1.2rem 1rem;
color: #aaa;
font-size: 0.9rem;
line-height: 1.6;
}
[data-template-family="network"] .faq__a a {
color: #115E7B;
}
[data-template-family="network"] .divider {
border: none;
border-top: 1px solid rgba(17,94,123,0.12);
margin: 3rem 0;
}
[data-template-family="network"] .text-center {
text-align: center;
}
[data-template-family="network"] .text-orange {
color: #fa9101;
}
[data-template-family="network"] .text-teal {
color: #115E7B;
}
[data-template-family="network"] .mt-1 {
margin-top: 0.5rem;
}
[data-template-family="network"] .mt-2 {
margin-top: 1rem;
}
[data-template-family="network"] .mt-3 {
margin-top: 2rem;
}
[data-template-family="network"] .mb-2 {
margin-bottom: 1rem;
}
[data-template-family="network"] .mb-3 {
margin-bottom: 2rem;
}
[data-template-family="network"] .gallery-swipe {
position: relative;
}
[data-template-family="network"] .gallery-swipe .grid--4 {
}
@media (max-width: 768px) {
[data-template-family="network"] .gallery-swipe .grid--4 {
display: flex !important;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 0.8rem;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
[data-template-family="network"] .gallery-swipe .grid--4::-webkit-scrollbar {
display: none;
}
[data-template-family="network"] .gallery-swipe .grid--4 > .card {
flex: 0 0 78%;
scroll-snap-align: center;
max-width: 78%;
}
[data-template-family="network"] .gallery-swipe .grid--4 > .card:first-child {
margin-left: 0;
}
}
[data-template-family="network"] .swipe-dots {
display: none;
justify-content: center;
gap: 0.4rem;
padding: 0.8rem 0;
}
@media (max-width: 768px) {
[data-template-family="network"] .swipe-dots {
display: flex;
}
}
[data-template-family="network"] .swipe-dots__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
[data-template-family="network"] .swipe-dots__dot.active {
background: #fa9101;
transform: scale(1.3);
}
[data-template-family="network"] .swipe-hint {
display: none;
text-align: center;
font-size: 0.75rem;
color: #666;
padding: 0.3rem 0 0;
}
@media (max-width: 768px) {
[data-template-family="network"] .swipe-hint {
display: block;
}
}
[data-template-family="network"] .ask-panel-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
[data-template-family="network"] .ask-panel-overlay.open {
opacity: 1;
pointer-events: auto;
}
[data-template-family="network"] .ask-panel {
position: fixed;
top: 0;
right: 0;
width: 420px;
max-width: 100%;
height: 100%;
z-index: 9999;
background: #0a0a0a;
border-left: 1px solid rgba(17,94,123,0.2);
transform: translateX(100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
}
[data-template-family="network"] .ask-panel.open {
transform: translateX(0);
}
[data-template-family="network"] .ask-panel__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(17,94,123,0.2);
background: rgba(10,10,10,0.95);
flex-shrink: 0;
}
[data-template-family="network"] .ask-panel__title {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
color: #fff;
}
[data-template-family="network"] .ask-panel__close {
background: none;
border: 1px solid rgba(17,94,123,0.2);
color: #115E7B;
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
[data-template-family="network"] .ask-panel__close:hover {
background: rgba(17,94,123,0.1);
}
[data-template-family="network"] .ask-panel__iframe {
flex: 1;
border: none;
width: 100%;
background: #0a0a0a;
}
@media (max-width: 768px) {
[data-template-family="network"] .ask-panel {
width: 100%;
}
}
@media (max-width: 768px) {
[data-template-family="network"] .hero__ctas {
flex-direction: column;
}
[data-template-family="network"] .hero__ctas .btn {
width: 100%; text-align: center;
}
[data-template-family="network"] .btn {
width: 100%; text-align: center;
}
[data-template-family="network"] .hero {
min-height: auto; padding: 2rem 0;
}
[data-template-family="network"] .hero p {
font-size: 1rem; margin-bottom: 1.5rem;
}
[data-template-family="network"] .hero__badge {
font-size: 0.7rem; margin-bottom: 1rem;
}
[data-template-family="network"] .grid--2,
[data-template-family="network"] .grid--3 {
grid-template-columns: 1fr;
}
[data-template-family="network"] .section {
padding: 2.5rem 0;
}
[data-template-family="network"] .section--tight {
padding: 1.5rem 0;
}
[data-template-family="network"] .section-header {
margin-bottom: 1.5rem; text-align: left;
}
[data-template-family="network"] .section-header p {
margin: 0.3rem 0 0;
}
[data-template-family="network"] .text-center {
text-align: left;
}
[data-template-family="network"] .container {
padding: 0 1rem;
}
[data-template-family="network"] .engage-card {
padding: 1.5rem; text-align: left;
}
[data-template-family="network"] .card[style*="grid-template-columns:280px"] {
grid-template-columns: 1fr !important;
}
[data-template-family="network"] [style*="grid-template-columns:auto 1fr auto"] {
grid-template-columns: 1fr !important;
}
[data-template-family="network"] [style*="grid-template-columns:2fr 1fr"] {
grid-template-columns: 1fr !important;
}
[data-template-family="network"] .steps {
flex-direction: column;
}
[data-template-family="network"] .hero__ctas .btn,
[data-template-family="network"] [style*="display:flex"][style*="gap"] .btn {
flex: 1 1 100%;
}
}
[data-template-family="network"] .hero--home {
background: linear-gradient(135deg, rgba(17,94,123,0.04), rgba(17,94,123,0.02));
}
[data-template-family="network"] .hero--artists {
background: linear-gradient(135deg, rgba(17,94,123,0.06), transparent);
}
[data-template-family="network"] .hero--gallery {
background: linear-gradient(135deg, rgba(17,94,123,0.05), transparent);
}
[data-template-family="network"] .view-toggle {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
[data-template-family="network"] .view-toggle__btn {
padding: 0.5rem 1rem;
background: transparent;
border: 1px solid rgba(255,255,255,0.1);
color: #888;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-family: 'Roboto', sans-serif;
transition: all 0.2s;
}
[data-template-family="network"] .view-toggle__btn.active {
background: rgba(17,94,123,0.1);
border-color: #115E7B;
color: #115E7B;
}
[data-template-family="network"] .steps {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
[data-template-family="network"] .step {
text-align: center;
flex: 1;
min-width: 200px;
max-width: 300px;
}
[data-template-family="network"] .step__num {
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(17,94,123,0.1);
border: 2px solid rgba(17,94,123,0.3);
color: #115E7B;
font-family: 'Roboto Slab', serif;
font-size: 1.2rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
[data-template-family="network"] .step p {
color: #aaa; font-size: 0.9rem;
}
[data-template-family="network"] .brands {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
}
[data-template-family="network"] .brand-item {
text-align: center;
width: 180px;
}
[data-template-family="network"] .brand-item__icon {
width: 64px; height: 64px;
border-radius: 12px;
background: rgba(17,94,123,0.08);
border: 1px solid rgba(17,94,123,0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.8rem;
font-size: 1.5rem;
}
[data-template-family="network"] .brand-item__name {
font-family: 'Roboto Slab', serif;
font-size: 0.9rem;
color: #fff;
}
[data-template-family="network"] .brand-item__desc {
font-size: 0.75rem;
color: #888;
margin-top: 0.2rem;
}
[data-template-family="network"] .section--blue {
background: rgba(17,94,123,0.9);
}
[data-template-family="network"] .flash-card {
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s, border-color 0.3s;
cursor: pointer;
}
[data-template-family="network"] .flash-card:hover {
transform: translateY(-4px);
border-color: rgba(250,145,1,0.4);
}
[data-template-family="network"] .flash-card__img {
aspect-ratio: 1;
background-color: rgba(17,94,123,0.04);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
[data-template-family="network"] .flash-card__placeholder {
font-size: 3rem;
opacity: 0.25;
}
[data-template-family="network"] .flash-card__body {
padding: 0.8rem 1rem;
}
[data-template-family="network"] .flash-card__title {
font-family: 'Roboto Slab', serif;
font-size: 0.9rem;
color: #fff;
margin-bottom: 0.2rem;
}
[data-template-family="network"] .flash-card__artist {
font-size: 0.75rem;
color: #888;
}
[data-template-family="network"] .flash-card__price {
font-size: 0.85rem;
color: #fa9101;
font-weight: 600;
margin-top: 0.3rem;
}
[data-template-family="network"] .sell-flash-banner {
display: flex;
align-items: center;
gap: 3rem;
background: linear-gradient(135deg, rgba(17,94,123,0.08) 0%, rgba(234,147,32,0.06) 100%);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 12px;
padding: 2.5rem;
}
[data-template-family="network"] .sell-flash-banner__content {
flex: 1;
}
[data-template-family="network"] .sell-flash-banner__content h2 {
margin-bottom: 0.8rem;
}
[data-template-family="network"] .sell-flash-banner__content p {
color: #aaa; font-size: 0.95rem; line-height: 1.6;
}
[data-template-family="network"] .sell-flash-banner__stats {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 180px;
}
[data-template-family="network"] .sell-flash-banner__stat {
text-align: center;
padding: 0.8rem 1.2rem;
background: rgba(0,0,0,0.3);
border-radius: 8px;
font-size: 0.85rem;
color: #aaa;
}
[data-template-family="network"] .sell-flash-banner__stat span {
display: block;
font-size: 1.3rem;
font-weight: 700;
color: #EA9320;
margin-bottom: 0.2rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .sell-flash-banner {
flex-direction: column;
gap: 1.5rem;
padding: 1.5rem;
}
[data-template-family="network"] .sell-flash-banner__stats {
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
width: 100%;
}
[data-template-family="network"] .sell-flash-banner__stat {
flex: 1; min-width: 100px;
}
}
[data-template-family="network"] .classifieds-list {
display: flex;
flex-direction: column;
gap: 0;
}
[data-template-family="network"] .classifieds-list__item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem 0;
border-bottom: 1px solid rgba(17,94,123,0.1);
}
[data-template-family="network"] .classifieds-list__item:first-child {
border-top: 1px solid rgba(17,94,123,0.1);
}
[data-template-family="network"] .classifieds-list__tag {
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
padding: 3px 8px;
border-radius: 4px;
flex-shrink: 0;
min-width: 42px;
text-align: center;
}
[data-template-family="network"] .classifieds-list__tag--job {
background: rgba(250,145,1,0.15);
color: #fa9101;
}
[data-template-family="network"] .classifieds-list__tag--gear {
background: rgba(17,94,123,0.15);
color: #3A9ABF;
}
[data-template-family="network"] .classifieds-list__tag--flash {
background: rgba(155,89,182,0.15);
color: #bb8fce;
}
[data-template-family="network"] .classifieds-list__tag--deal {
background: rgba(46,204,113,0.15);
color: #2ecc71;
}
[data-template-family="network"] .classifieds-list__text {
color: #ccc;
font-size: 0.9rem;
}
[data-template-family="network"] .masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 8px;
}
[data-template-family="network"] .masonry__item {
position: relative;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
}
[data-template-family="network"] .masonry__item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
[data-template-family="network"] .masonry__item:hover img {
transform: scale(1.08);
}
[data-template-family="network"] .masonry__item--tall {
grid-row: span 2;
}
[data-template-family="network"] .masonry__item--wide {
grid-column: span 2;
}
[data-template-family="network"] .masonry__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
opacity: 0;
transition: opacity 0.3s ease;
}
[data-template-family="network"] .masonry__item:hover .masonry__overlay {
opacity: 1;
}
[data-template-family="network"] .masonry__title {
color: #fff;
font-family: 'Roboto Slab', serif;
font-size: 0.9rem;
font-weight: 600;
}
[data-template-family="network"] .masonry__meta {
color: #aaa;
font-size: 0.75rem;
margin-top: 0.15rem;
}
[data-template-family="network"] .masonry__votes {
color: #fa9101;
font-size: 0.8rem;
font-weight: 600;
margin-top: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .masonry {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 160px;
}
[data-template-family="network"] .masonry__item--wide {
grid-column: span 1;
}
[data-template-family="network"] .masonry__overlay {
opacity: 1;
}
}
[data-template-family="network"] .section--quote {
position: relative;
z-index: 1;
padding: 4rem 0;
border-top: 1px solid rgba(17,94,123,0.1);
border-bottom: 1px solid rgba(17,94,123,0.1);
}
[data-template-family="network"] .section--quote .container {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 3rem;
align-items: center;
}
[data-template-family="network"] .quote-spotlight {
position: relative;
padding-left: 2rem;
}
[data-template-family="network"] .quote-spotlight__mark {
position: absolute;
top: -0.5rem;
left: -0.5rem;
font-size: 5rem;
font-family: 'Roboto Slab', serif;
color: rgba(17,94,123,0.2);
line-height: 1;
pointer-events: none;
}
[data-template-family="network"] .quote-spotlight__text {
font-family: 'Roboto Slab', serif;
font-size: 1.3rem;
color: #e0e0e0;
line-height: 1.7;
font-style: italic;
border: none;
margin: 0;
padding: 0;
}
[data-template-family="network"] .quote-spotlight__author {
margin-top: 1.5rem;
}
[data-template-family="network"] .quote-spotlight__name {
color: #fff;
font-weight: 600;
font-size: 1rem;
}
[data-template-family="network"] .quote-spotlight__role {
color: #888;
font-size: 0.85rem;
margin-top: 0.2rem;
}
[data-template-family="network"] .quote-spotlight__nav {
display: flex;
gap: 0.5rem;
margin-top: 1.5rem;
}
[data-template-family="network"] .quote-spotlight__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #555;
background: transparent;
cursor: pointer;
padding: 0;
transition: all 0.2s;
}
[data-template-family="network"] .quote-spotlight__dot.active {
background: #fa9101;
border-color: #fa9101;
}
[data-template-family="network"] .quote-sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
[data-template-family="network"] .quote-mini {
padding: 1.2rem;
background: rgba(20,20,20,0.6);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 10px;
transition: border-color 0.2s;
}
[data-template-family="network"] .quote-mini:hover {
border-color: rgba(17,94,123,0.35);
}
[data-template-family="network"] .quote-mini__stars {
color: #fa9101;
font-size: 0.85rem;
letter-spacing: 2px;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .quote-mini p {
color: #aaa;
font-size: 0.82rem;
font-style: italic;
line-height: 1.5;
}
[data-template-family="network"] .quote-mini__author {
color: #777;
font-size: 0.75rem;
margin-top: 0.6rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .section--quote .container {
grid-template-columns: 1fr;
gap: 2rem;
}
[data-template-family="network"] .quote-spotlight__text {
font-size: 1.1rem;
}
}
[data-template-family="network"] .blog-featured {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 1.5rem;
}
[data-template-family="network"] .blog-featured__main {
display: flex;
flex-direction: column;
background: rgba(20,20,20,0.8);
border: 1px solid rgba(17,94,123,0.2);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
transition: border-color 0.3s, transform 0.3s;
}
[data-template-family="network"] .blog-featured__main:hover {
border-color: rgba(17,94,123,0.4);
transform: translateY(-4px);
}
[data-template-family="network"] .blog-featured__img {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
}
[data-template-family="network"] .blog-featured__content {
padding: 1.5rem;
flex: 1;
}
[data-template-family="network"] .blog-featured__tag {
color: #EA9320;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-template-family="network"] .blog-featured__content h3 {
font-size: 1.3rem;
margin: 0.5rem 0;
line-height: 1.3;
}
[data-template-family="network"] .blog-featured__content p {
color: #888;
font-size: 0.9rem;
}
[data-template-family="network"] .blog-featured__read {
color: #115E7B;
font-size: 0.85rem;
font-weight: 500;
}
[data-template-family="network"] .blog-featured__sidebar {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
[data-template-family="network"] .blog-sidebar__item {
display: block;
padding: 1.2rem;
background: rgba(20,20,20,0.6);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 10px;
text-decoration: none;
flex: 1;
transition: border-color 0.2s, transform 0.2s;
}
[data-template-family="network"] .blog-sidebar__item:hover {
border-color: rgba(17,94,123,0.35);
transform: translateY(-2px);
}
[data-template-family="network"] .blog-sidebar__tag {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-template-family="network"] .blog-sidebar__item h4 {
font-size: 1rem;
margin: 0.4rem 0;
line-height: 1.3;
}
[data-template-family="network"] .blog-sidebar__item p {
color: #888;
font-size: 0.82rem;
margin: 0;
}
@media (max-width: 768px) {
[data-template-family="network"] .blog-featured {
grid-template-columns: 1fr;
}
[data-template-family="network"] .blog-featured__img {
aspect-ratio: 16 / 9;
}
}
[data-template-family="network"] .section--split {
position: relative;
z-index: 1;
padding: 3rem 0;
background: rgba(17,94,123,0.03);
}
[data-template-family="network"] .split-duo {
display: flex;
gap: 0;
align-items: stretch;
}
[data-template-family="network"] .split-duo__panel {
flex: 1;
padding: 2rem;
}
[data-template-family="network"] .split-duo__divider {
width: 1px;
background: linear-gradient(to bottom, transparent, rgba(17,94,123,0.3), transparent);
flex-shrink: 0;
}
[data-template-family="network"] .split-duo__icon {
font-size: 2rem;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .split-duo__desc {
color: #888;
font-size: 0.9rem;
margin-bottom: 1rem;
}
[data-template-family="network"] .split-duo__list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
[data-template-family="network"] .split-duo__list li {
font-size: 0.85rem;
color: #ccc;
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
[data-template-family="network"] .split-duo__bullet {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 0.45rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .split-duo {
flex-direction: column;
}
[data-template-family="network"] .split-duo__divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, rgba(17,94,123,0.3), transparent);
margin: 1rem 0;
}
[data-template-family="network"] .split-duo__panel {
padding: 1.5rem 0;
}
}
[data-template-family="network"] .event-card-live {
display: flex;
flex-direction: column;
background: rgba(10,10,10,0.5);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
overflow: hidden;
text-decoration: none;
transition: transform 0.3s, border-color 0.3s;
}
[data-template-family="network"] .event-card-live:hover {
transform: translateY(-4px);
border-color: rgba(255,255,255,0.3);
}
[data-template-family="network"] .event-card-live__img {
width: 100%;
aspect-ratio: 16 / 9;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
[data-template-family="network"] .event-card-live__img--empty {
background: rgba(17,94,123,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
}
[data-template-family="network"] .event-card-live__body {
padding: 1rem;
}
[data-template-family="network"] .event-card-live__date {
color: #fa9101;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.3rem;
}
[data-template-family="network"] .event-card-live h4 {
font-family: 'Roboto Slab', serif;
font-size: 0.95rem;
color: #fff;
margin-bottom: 0.3rem;
line-height: 1.3;
}
[data-template-family="network"] .event-card-live__loc {
color: rgba(255,255,255,0.6);
font-size: 0.8rem;
}
[data-template-family="network"] .event-card-live__footnote {
display: block;
margin-top: 0.4rem;
font-size: 0.75rem;
color: #EA9320;
font-weight: 500;
opacity: 0.7;
transition: opacity 0.15s;
}
[data-template-family="network"] .event-card-live:hover .event-card-live__footnote {
opacity: 1;
}
[data-template-family="network"] .timeline {
position: relative;
display: flex;
gap: 0;
align-items: flex-start;
padding: 1rem 0 2rem;
}
[data-template-family="network"] .timeline__line {
position: absolute;
top: 2.3rem;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(to right, rgba(17,94,123,0.4), rgba(250,145,1,0.3));
}
[data-template-family="network"] .timeline__event {
flex: 1;
position: relative;
padding-top: 2.5rem;
text-align: center;
}
[data-template-family="network"] .timeline__dot {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: #0a0a0a;
border: 2px solid rgba(17,94,123,0.6);
z-index: 1;
}
[data-template-family="network"] .timeline__dot--highlight {
border-color: #fa9101;
background: #fa9101;
box-shadow: 0 0 12px rgba(250,145,1,0.4);
}
[data-template-family="network"] .timeline__date {
color: #888;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .timeline__content h3 {
font-size: 1.1rem;
margin-bottom: 0.3rem;
}
[data-template-family="network"] .timeline__location {
color: #777;
font-size: 0.82rem;
}
[data-template-family="network"] .timeline__cta {
display: inline-block;
color: #115E7B;
font-size: 0.8rem;
font-weight: 500;
margin-top: 0.5rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .timeline {
flex-direction: column;
padding-left: 2rem;
}
[data-template-family="network"] .timeline__line {
top: 0;
bottom: 0;
left: 0.5rem;
right: auto;
width: 2px;
height: auto;
background: linear-gradient(to bottom, rgba(17,94,123,0.4), rgba(250,145,1,0.3));
}
[data-template-family="network"] .timeline__event {
padding-top: 0;
padding-left: 1.5rem;
padding-bottom: 1.5rem;
text-align: left;
}
[data-template-family="network"] .timeline__dot {
top: 0.25rem;
left: -1.5rem;
transform: none;
}
}
[data-template-family="network"] .section--learn {
position: relative;
z-index: 1;
padding: 3rem 0;
width: 100%;
background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(17,94,123,0.04) 100%);
}
[data-template-family="network"] .learn-cards {
display: flex;
flex-direction: column;
gap: 0;
}
[data-template-family="network"] .learn-card {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 1.5rem;
border-bottom: 1px solid rgba(17,94,123,0.1);
text-decoration: none;
transition: background 0.2s;
}
[data-template-family="network"] .learn-card:first-child {
border-top: 1px solid rgba(17,94,123,0.1);
}
[data-template-family="network"] .learn-card:hover {
background: rgba(17,94,123,0.04);
}
[data-template-family="network"] .learn-card__number {
font-family: 'Roboto Slab', serif;
font-size: 2rem;
font-weight: 700;
color: rgba(17,94,123,0.6);
flex-shrink: 0;
width: 3rem;
text-align: center;
}
[data-template-family="network"] .learn-card__body {
flex: 1;
}
[data-template-family="network"] .learn-card__tag {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
[data-template-family="network"] .learn-card__body h4 {
font-size: 1.05rem;
margin: 0.3rem 0;
}
[data-template-family="network"] .learn-card__body p {
color: #888;
font-size: 0.85rem;
margin: 0;
}
[data-template-family="network"] .learn-card__arrow {
color: #115E7B;
font-size: 1.2rem;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
}
[data-template-family="network"] .learn-card:hover .learn-card__arrow {
opacity: 1;
transform: translateX(4px);
}
@media (max-width: 768px) {
[data-template-family="network"] .learn-card {
padding: 1.2rem 0.5rem;
gap: 1rem;
}
[data-template-family="network"] .learn-card__number {
font-size: 1.5rem;
width: 2.5rem;
}
[data-template-family="network"] .learn-card__arrow {
display: none;
}
}
[data-template-family="network"] .section--ask-band {
position: relative;
z-index: 1;
padding: 3.5rem 0;
background: #080c12;
border-top: 1px solid rgba(17,94,123,0.15);
border-bottom: 1px solid rgba(17,94,123,0.15);
}
[data-template-family="network"] .ask-band {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
align-items: center;
}
[data-template-family="network"] .ask-band__left h2 {
margin-bottom: 0.8rem;
}
[data-template-family="network"] .ask-band__left p {
color: #888;
font-size: 0.95rem;
margin: 0;
}
[data-template-family="network"] .ask-band__right .ask-section__search {
margin: 0 0 1rem;
max-width: 100%;
}
[data-template-family="network"] .ask-band__right .ask-topics {
justify-content: flex-start;
}
@media (max-width: 768px) {
[data-template-family="network"] .ask-band {
grid-template-columns: 1fr;
gap: 1.5rem;
text-align: center;
}
[data-template-family="network"] .ask-band__right .ask-topics {
justify-content: center;
}
[data-template-family="network"] .ask-band__right .ask-section__search {
flex-direction: column;
gap: 0.5rem;
}
[data-template-family="network"] .ask-band__right .ask-section__input {
border-right: 1px solid rgba(17,94,123,0.3);
border-radius: 6px;
}
[data-template-family="network"] .ask-band__right .ask-section__btn {
border-radius: 6px;
}
}
[data-template-family="network"] .section--cta-band {
position: relative;
z-index: 1;
padding: 4rem 0;
background: linear-gradient(135deg, rgba(17,94,123,0.1) 0%, rgba(250,145,1,0.06) 100%);
border-top: 1px solid rgba(17,94,123,0.15);
}
[data-template-family="network"] .section--cta-band h2 {
margin-bottom: 0.5rem;
}
[data-template-family="network"] .section--cta-band p {
color: #aaa;
max-width: 550px;
margin: 0 auto;
}
[data-template-family="network"] .ad-spot {
padding: 1rem 0;
}
[data-template-family="network"] .ad-spot--hero-row {
padding: 0.8rem 0;
}
[data-template-family="network"] .ad-spot__hero-flex {
display: flex;
gap: 1.5rem;
align-items: stretch;
}
[data-template-family="network"] .ad-spot__hero-ad {
flex: 1;
min-width: 0;
}
@media (max-width: 640px) {
[data-template-family="network"] .ad-spot__hero-flex {
flex-direction: column;
}
}
[data-template-family="network"] .ad-spot--google .ad-spot__label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #888;
margin-bottom: 0.3rem;
}
[data-template-family="network"] .ad-spot--google .ad-spot__content {
display: flex;
gap: 1rem;
align-items: flex-start;
}
[data-template-family="network"] .ad-spot--google .ad-spot__headline a {
color: #8ab4f8;
font-size: 1.05rem;
text-decoration: none;
font-weight: 500;
}
[data-template-family="network"] .ad-spot--google .ad-spot__headline a:hover {
text-decoration: underline;
}
[data-template-family="network"] .ad-spot--google .ad-spot__desc {
color: #aaa;
font-size: 0.85rem;
margin-top: 0.2rem;
max-width: 600px;
}
[data-template-family="network"] .ad-spot--google .ad-spot__url {
color: #5e9a5e;
font-size: 0.78rem;
margin-top: 0.15rem;
}
[data-template-family="network"] .ad-spot--social {
padding: 1.5rem 0;
}
[data-template-family="network"] .ad-spot__social-row {
display: flex;
gap: 1.5rem;
justify-content: center;
align-items: stretch;
}
[data-template-family="network"] .ad-spot__social-row .ad-spot__social-card {
flex: 1;
max-width: 480px;
margin: 0;
}
@media (max-width: 768px) {
[data-template-family="network"] .ad-spot__social-row {
flex-direction: column;
align-items: center;
}
[data-template-family="network"] .ad-spot__social-row .ad-spot__social-card {
width: 100%;
}
}
[data-template-family="network"] .ad-spot__social-card {
max-width: 480px;
margin: 0 auto;
background: #1a1a1a;
border-radius: 10px;
overflow: hidden;
border: 1px solid #2e2e2e;
}
[data-template-family="network"] .ad-spot__social-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.8rem 1rem;
}
[data-template-family="network"] .ad-spot__social-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: #115E7B;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
}
[data-template-family="network"] .ad-spot__social-brand {
font-size: 0.85rem;
font-weight: 600;
color: #fff;
}
[data-template-family="network"] .ad-spot__social-tag {
font-size: 0.65rem;
color: #888;
}
[data-template-family="network"] .ad-spot__social-img {
width: 100%;
min-height: 200px;
background-size: cover;
background-position: center;
}
[data-template-family="network"] .ad-spot__social-body {
padding: 1rem;
}
[data-template-family="network"] .ad-spot__social-body p {
color: #bbb;
font-size: 0.85rem;
line-height: 1.4;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .ad-spot__social-cta {
display: inline-block;
background: #115E7B;
color: #fff;
padding: 0.5rem 1.2rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s;
}
[data-template-family="network"] .ad-spot__social-cta:hover {
background: #0e4d66;
}
[data-template-family="network"] .partner-row {
margin-bottom: 1.8rem;
}
[data-template-family="network"] .partner-row:last-child {
margin-bottom: 0;
}
[data-template-family="network"] .section--sponsored {
background: rgba(255,255,255,0.02);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-template-family="network"] .sponsored-label {
display: inline-block;
font-size: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #666;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
padding: 0.2rem 0.6rem;
border-radius: 3px;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .partner-cards {
display: flex;
gap: 1rem;
flex-wrap: wrap;
padding-bottom: 0.5rem;
}
[data-template-family="network"] .partner-card {
flex: 1 1 220px;
max-width: 280px;
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
[data-template-family="network"] .partner-card:hover {
border-color: rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
transform: translateY(-2px);
}
[data-template-family="network"] .partner-card--highlight {
border-color: #2a7a4f;
}
[data-template-family="network"] .partner-card--highlight:hover {
border-color: #3a9a6f;
}
[data-template-family="network"] .partner-card__avatar {
width: 100%;
height: 140px;
border-radius: 0;
background: #115E7B;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: 700;
flex-shrink: 0;
object-fit: cover;
}
[data-template-family="network"] .partner-card__logo {
width: 42px;
height: 42px;
border-radius: 50%;
object-fit: contain;
background: #fff;
flex-shrink: 0;
}
[data-template-family="network"] .partner-card__info {
display: flex;
flex-direction: column;
padding: 1rem;
flex-grow: 1;
min-width: 0;
}
[data-template-family="network"] .partner-card__name {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
margin-bottom: 0.25rem;
}
[data-template-family="network"] .partner-card__desc {
font-size: 0.78rem;
color: #999;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[data-template-family="network"] .partner-card__tag {
display: inline-block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #115E7B;
margin-top: 0.4rem;
font-weight: 600;
}
@media (max-width: 640px) {
[data-template-family="network"] .partner-card {
flex: 0 0 250px;
}
}
[data-template-family="network"] .section-header--left {
text-align: left;
}
[data-template-family="network"] .section-header--left p {
margin-left: 0;
}
[data-template-family="network"] .how-it-works {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
position: relative;
padding-top: 20px;
}
[data-template-family="network"] .how-it-works::before {
content: '';
position: absolute;
top: 36px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #115E7B, rgba(17,94,123,0.3));
z-index: 0;
border-radius: 2px;
display: none;
}
[data-template-family="network"] .hiw-step {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1rem;
}
[data-template-family="network"] .hiw-step__number {
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #115E7B 0%, #0d4a60 100%);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 4px rgba(17,94,123,0.2), 0 3px 10px rgba(17,94,123,0.4);
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
[data-template-family="network"] .hiw-step h3 {
font-size: 0.95rem;
font-weight: 700;
color: #fff;
margin-bottom: 0.4rem;
}
[data-template-family="network"] .hiw-step p {
font-size: 0.82rem;
color: #aaa;
line-height: 1.5;
margin: 0;
max-width: 280px;
}
@media (max-width: 1024px) {
[data-template-family="network"] .how-it-works {
grid-template-columns: repeat(2, 1fr); gap: 1.5rem;
}
}
@media (max-width: 768px) {
[data-template-family="network"] .how-it-works {
grid-template-columns: 1fr; gap: 1rem; padding-top: 0;
}
[data-template-family="network"] .how-it-works::before {
display: none;
}
[data-template-family="network"] .hiw-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: 1rem;
padding: 1rem 0 1rem 0;
}
[data-template-family="network"] .hiw-step__number {
margin-bottom: 0; width: 36px; height: 36px; min-width: 36px;
}
[data-template-family="network"] .hiw-step h3 {
font-size: 0.9rem; margin-bottom: 0.2rem;
}
[data-template-family="network"] .hiw-step p {
font-size: 0.78rem; max-width: none;
}
}
[data-template-family="network"] .style-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
}
[data-template-family="network"] .style-tile {
position: relative;
display: flex;
align-items: flex-end;
border-radius: 10px;
overflow: hidden;
aspect-ratio: 1;
text-decoration: none;
background-size: cover;
background-position: center;
transition: transform 0.2s;
}
[data-template-family="network"] .style-tile:hover {
transform: scale(1.03);
}
[data-template-family="network"] .style-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
[data-template-family="network"] .style-tile:hover img {
transform: scale(1.08);
}
[data-template-family="network"] .style-tile span,
[data-template-family="network"] .style-tile__label {
position: relative;
z-index: 1;
display: block;
width: 100%;
padding: 0.6rem 0.75rem;
background: linear-gradient(transparent, rgba(0,0,0,0.8));
color: #fff;
font-size: 0.85rem;
font-weight: 600;
}
@media (max-width: 768px) {
[data-template-family="network"] .style-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
[data-template-family="network"] .style-tile span,
[data-template-family="network"] .style-tile__label {
font-size: 0.75rem;
padding: 0.4rem 0.5rem;
}
}
[data-template-family="network"] .transform-card {
background: rgba(17,94,123,0.08);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 12px;
overflow: hidden;
}
[data-template-family="network"] .transform-card__images {
display: flex;
height: 200px;
}
[data-template-family="network"] .transform-card__before,
[data-template-family="network"] .transform-card__after {
flex: 1;
position: relative;
overflow: hidden;
}
[data-template-family="network"] .transform-card__before {
border-right: 2px solid rgba(255,255,255,0.3);
}
[data-template-family="network"] .transform-card__img {
width: 100%;
height: 100%;
}
[data-template-family="network"] .transform-card__label {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.2rem 0.5rem;
border-radius: 4px;
z-index: 2;
}
[data-template-family="network"] .transform-card__after .transform-card__label {
background: #115E7B;
left: auto;
right: 0.5rem;
}
[data-template-family="network"] .transform-card__body {
padding: 0.75rem 1rem;
}
[data-template-family="network"] .transform-card__title {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
}
[data-template-family="network"] .transform-card__meta {
font-size: 0.8rem;
color: #aaa;
margin-top: 0.2rem;
}
[data-template-family="network"] .featured-artist-card {
display: block;
text-decoration: none;
border-radius: 12px;
overflow: hidden;
background: rgba(17,94,123,0.1);
border: 1px solid rgba(17,94,123,0.2);
transition: transform 0.2s, border-color 0.2s;
}
[data-template-family="network"] .featured-artist-card:hover {
transform: translateY(-2px);
border-color: #115E7B;
}
[data-template-family="network"] .featured-artist-card__img {
height: 200px;
background-size: cover;
background-position: center;
}
[data-template-family="network"] .featured-artist-card__info {
padding: 1rem;
}
[data-template-family="network"] .featured-artist-card__label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #EA9320;
font-weight: 600;
margin-bottom: 0.3rem;
}
[data-template-family="network"] .featured-artist-card__name {
font-size: 1.05rem;
font-weight: 700;
color: #fff;
}
[data-template-family="network"] .featured-artist-card__meta {
font-size: 0.8rem;
color: #aaa;
margin-top: 0.2rem;
}
[data-template-family="network"] .featured-artist-card__link {
font-size: 0.8rem;
color: #115E7B;
margin-top: 0.5rem;
font-weight: 600;
}
[data-template-family="network"] .faq-list {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
align-items: start;
}
@media (max-width: 768px) {
[data-template-family="network"] .faq-list {
grid-template-columns: 1fr;
}
}
[data-template-family="network"] .faq-item {
background: rgba(17,94,123,0.06);
border: 1px solid rgba(17,94,123,0.12);
border-radius: 8px;
overflow: hidden;
}
[data-template-family="network"] .faq-item summary {
padding: 1rem 1.25rem;
font-size: 0.95rem;
font-weight: 600;
color: #fff;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
[data-template-family="network"] .faq-item summary::-webkit-details-marker {
display: none;
}
[data-template-family="network"] .faq-item summary::after {
content: '+';
font-size: 1.2rem;
color: #115E7B;
font-weight: 700;
flex-shrink: 0;
margin-left: 1rem;
}
[data-template-family="network"] .faq-item[open] summary::after {
content: '\2212';
}
[data-template-family="network"] .faq-item__answer {
padding: 0 1.25rem 1rem;
font-size: 0.88rem;
color: #bbb;
line-height: 1.6;
}
[data-template-family="network"] .faq-item__answer p {
margin: 0;
}
[data-template-family="network"] .faq-item__answer strong {
color: #ddd;
}
[data-template-family="network"] .faq-item__answer a {
color: #115E7B;
}
[data-template-family="network"] .faq-item:last-child {
grid-column: 1 / -1; max-width: 50%;
}
[data-template-family="network"] .pricing-card {
background: rgba(17,94,123,0.08);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 12px;
padding: 1.25rem;
}
[data-template-family="network"] .pricing-card h3 {
font-size: 1.1rem;
color: #fff;
margin-bottom: 1rem;
}
[data-template-family="network"] .pricing-card__rows {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
[data-template-family="network"] .pricing-card__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.35rem 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
font-size: 0.85rem;
}
[data-template-family="network"] .pricing-card__row span {
color: #aaa;
}
[data-template-family="network"] .pricing-card__row strong {
color: #fff;
}
[data-template-family="network"] .pricing-card__note {
margin-top: 1rem;
font-size: 0.8rem;
color: #888;
}
[data-template-family="network"] .pricing-card__note a {
color: #115E7B;
}
[data-template-family="network"] .newsletter-card {
background: rgba(17,94,123,0.08);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
[data-template-family="network"] .newsletter-card h3 {
font-size: 1.1rem;
color: #fff;
margin-bottom: 0.5rem;
}
[data-template-family="network"] .newsletter-card p {
font-size: 0.85rem;
color: #aaa;
line-height: 1.5;
margin-bottom: 1rem;
}
[data-template-family="network"] .newsletter-card__form {
display: flex;
gap: 0.5rem;
}
[data-template-family="network"] .newsletter-card__input {
flex: 1;
padding: 0.65rem 1rem;
border-radius: 8px;
border: 1px solid rgba(17,94,123,0.3);
background: rgba(0,0,0,0.3);
color: #fff;
font-size: 0.9rem;
}
[data-template-family="network"] .newsletter-card__input::placeholder {
color: #777;
}
@media (max-width: 768px) {
[data-template-family="network"] .newsletter-card__form {
flex-direction: column;
}
}
[data-template-family="network"] .trust-bar {
background: linear-gradient(135deg, rgba(17,94,123,0.25) 0%, rgba(17,94,123,0.12) 100%);
border-top: 1px solid rgba(17,94,123,0.35);
border-bottom: 1px solid rgba(17,94,123,0.35);
padding: 1.1rem 0;
}
[data-template-family="network"] .trust-bar__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
gap: 2.5rem;
padding: 0 1.5rem;
}
[data-template-family="network"] .trust-bar__stat {
color: rgba(255,255,255,0.7);
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
}
[data-template-family="network"] .trust-bar__stat span {
color: #3aa8d2;
font-family: 'Roboto Slab', serif;
font-weight: 700;
font-size: 1.25rem;
margin-right: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .trust-bar {
padding: 0.8rem 0; width: 100%;
}
[data-template-family="network"] .trust-bar__inner {
gap: 0.75rem 1.5rem; justify-content: center; flex-wrap: wrap; padding: 0 1rem;
}
[data-template-family="network"] .trust-bar__stat {
font-size: 0.75rem;
}
[data-template-family="network"] .trust-bar__stat span {
font-size: 1rem;
}
}
[data-template-family="network"] .benefit-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(17,94,123,0.15);
border-radius: 12px;
padding: 1.5rem 1.2rem;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
[data-template-family="network"] .benefit-card:hover {
transform: translateY(-3px);
border-color: rgba(17,94,123,0.4);
box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
[data-template-family="network"] .benefit-card__icon {
font-size: 2rem;
margin-bottom: 0.8rem;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, rgba(17,94,123,0.2), rgba(17,94,123,0.05));
}
[data-template-family="network"] .benefit-card h3 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0 0 0.5rem;
color: #fff;
}
[data-template-family="network"] .benefit-card p {
font-size: 0.85rem;
color: #aaa;
line-height: 1.5;
margin: 0;
}
[data-template-family="network"] .studio-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
color: inherit;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 1.5rem 1rem;
transition: transform 0.2s, border-color 0.2s;
}
[data-template-family="network"] .studio-card:hover {
transform: translateY(-3px);
border-color: rgba(17,94,123,0.4);
}
[data-template-family="network"] .studio-card__icon {
font-size: 2rem;
margin-bottom: 0.8rem;
}
[data-template-family="network"] .studio-card__body h4 {
font-family: 'Roboto Slab', serif;
font-size: 1rem;
margin: 0 0 0.3rem;
color: #fff;
}
[data-template-family="network"] .studio-card__loc {
font-size: 0.8rem;
color: #888;
margin-bottom: 0.3rem;
}
[data-template-family="network"] .studio-card__spec {
font-size: 0.78rem;
color: #aaa;
}
[data-template-family="network"] .studio-card__cta {
display: inline-block;
margin-top: 0.8rem;
color: #115E7B;
font-size: 0.85rem;
font-weight: 600;
}
[data-template-family="network"] .studio-network-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1.5rem;
padding: 1rem 0;
border-top: 1px solid rgba(255,255,255,0.06);
}
[data-template-family="network"] .studio-network-stats__item {
color: #aaa;
font-size: 0.85rem;
}
[data-template-family="network"] .studio-network-stats__item span {
color: #fff;
font-family: 'Roboto Slab', serif;
font-weight: 700;
font-size: 1.1rem;
margin-right: 0.3rem;
}
@media (max-width: 768px) {
[data-template-family="network"] .studio-network-stats {
flex-direction: column; align-items: center; gap: 0.5rem;
}
}
/* ─────────────────────────────────────────────────────────────
Subhead helper (used by /studios, /find-artist, etc. for filter labels)
───────────────────────────────────────────────────────────── */
[data-template-family="network"] .section__subhead {
color: rgba(255,255,255,0.55);
margin: 0 0 1.5rem;
font-size: 0.95rem;
}
/* ─────────────────────────────────────────────────────────────
Override .hero--short for listing/thumbnail pages.
Source CSS has min-height: 50vh on .hero--short which leaves big
empty bands above + below the hero content because the parent
.hero uses display:flex; align-items:center. For listing pages
(/gallery/tattoos, /studios, /find-artist, /tattoo-studio/[slug])
we want the header tight so thumbnails appear above the fold.
───────────────────────────────────────────────────────────── */
[data-template-family="network"] .hero--short {
min-height: 0;
padding: 2.5rem 0 1.25rem;
display: block;
}
[data-template-family="network"] .hero--short h1 {
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
margin-bottom: 0.75rem;
}
[data-template-family="network"] .hero--short p {
margin-bottom: 0;
}
[data-template-family="network"] .hero--short .hero__badge {
margin-bottom: 0.85rem;
}
/* ─────────────────────────────────────────────────────────────
.hero--collage — keyword/style-guide header with a dim mosaic of
the category's strongest tattoos behind the title. Restores real
header presence (the bare .hero--short is text-on-black) and puts
colour + ink above the fold. Heading is bottom-anchored over the
imagery; .hero__overlay keeps it legible. Mosaic is decorative
(aria-hidden) — the alt-tagged gallery is the indexed content.
───────────────────────────────────────────────────────────── */
[data-template-family="network"] .hero--collage {
position: relative;
overflow: hidden;
min-height: 320px;
display: flex;
align-items: flex-end;
padding: 2.5rem 0 1.75rem;
}
[data-template-family="network"] .hero__collage {
position: absolute;
inset: 0;
z-index: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
}
[data-template-family="network"] .hero__collage-tile {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Vertical scrim: tattoos read up top, title legible at the bottom. */
[data-template-family="network"] .hero--collage .hero__overlay {
background: linear-gradient(
to bottom,
rgba(5,7,10,0.45) 0%,
rgba(5,7,10,0.50) 40%,
rgba(5,7,10,0.93) 100%
);
}
[data-template-family="network"] .hero--collage .hero__content {
position: relative;
z-index: 2;
}
[data-template-family="network"] .hero--collage p {
color: #d8d8d8;
}
@media (max-width: 640px) {
[data-template-family="network"] .hero--collage {
min-height: 220px;
}
/* 3 tiles fit cleanly on phones; drop the last two. */
[data-template-family="network"] .hero__collage {
grid-template-columns: repeat(3, 1fr);
}
[data-template-family="network"] .hero__collage-tile:nth-child(n+4) {
display: none;
}
}
/* ─────────────────────────────────────────────────────────────
Studio card overrides — image-led layout (Gabe walkthrough fix).
Source CSS gives .studio-card edge padding 1.25rem and uses an
icon glyph; we replace the icon with the studio's latest tattoo.
───────────────────────────────────────────────────────────── */
[data-template-family="network"] .studio-card {
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
[data-template-family="network"] .studio-card__image {
width: 100%;
aspect-ratio: 4 / 3;
background: #111;
overflow: hidden;
}
[data-template-family="network"] .studio-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
[data-template-family="network"] .studio-card:hover .studio-card__image img {
transform: scale(1.05);
}
[data-template-family="network"] .studio-card__body {
padding: 1rem 1.25rem 0.5rem;
}
[data-template-family="network"] .studio-card__cta {
padding: 0 1.25rem 1.25rem;
margin-top: auto;
}
/* ============================================================
Phase D — Tattoo of the Week hero + Ask TattooNOW pill
============================================================ */
/* Tattoo of the Week card: replaces the chat embed in the hero. On
desktop sits as the right column of the .grid--2 hero, on mobile
stacks below the copy. Image is the focal element; title + credit
+ CTA sit beneath. */
[data-template-family="network"] .totw-hero {
display: block;
position: relative;
overflow: hidden;
border-radius: 12px;
background: rgba(10,10,10,0.7);
border: 1px solid rgba(250,145,1,0.18);
transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
color: inherit;
text-decoration: none;
}
[data-template-family="network"] .totw-hero:hover {
transform: translateY(-2px);
border-color: rgba(250,145,1,0.45);
box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
[data-template-family="network"] .totw-hero__media {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
background: #111;
overflow: hidden;
}
[data-template-family="network"] .totw-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
[data-template-family="network"] .totw-hero__badge {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(135deg, #fa9101, #EA9320);
color: #0a0a0a;
font-family: 'Roboto', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
[data-template-family="network"] .totw-hero__body {
padding: 0.85rem 1rem 1rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
[data-template-family="network"] .totw-hero__title {
font-family: 'Roboto', sans-serif;
font-weight: 600;
font-size: 1rem;
color: #f1f1f1;
line-height: 1.3;
}
[data-template-family="network"] .totw-hero__credit {
font-size: 0.8rem;
color: rgba(255,255,255,0.6);
}
[data-template-family="network"] .totw-hero__cta {
margin-top: 0.5rem;
font-size: 0.82rem;
font-weight: 600;
color: #EA9320;
}
/* Play / slides badge — bottom-left of the media area */
[data-template-family="network"] .totw-hero__media-type-badge {
position: absolute;
bottom: 0.5rem;
left: 0.5rem;
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 0.72rem;
padding: 0.2rem 0.45rem;
border-radius: 4px;
pointer-events: none;
}
/* Carousel nav — prev/next arrows + count, overlaid at bottom */
[data-template-family="network"] .totw-hero__carousel-nav {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.4rem 0.5rem;
background: linear-gradient(transparent, rgba(0,0,0,0.55));
}
[data-template-family="network"] .totw-hero__carousel-btn {
background: rgba(255,255,255,0.15);
border: none;
color: #fff;
font-size: 1rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s;
}
[data-template-family="network"] .totw-hero__carousel-btn:hover {
background: rgba(255,255,255,0.3);
}
[data-template-family="network"] .totw-hero__carousel-count {
color: rgba(255,255,255,0.85);
font-size: 0.78rem;
font-weight: 600;
}
@media (max-width: 768px) {
[data-template-family="network"] .totw-hero__media {
aspect-ratio: 1 / 1;
}
}
/* Tattoo of the Day — constrain hero card width in its own section */
[data-template-family="network"] .totd-hero-wrap {
max-width: 420px;
}
/* ── Gallery Hub editorial layout (.ghub-*) ──────────────────────── */
[data-template-family="network"] .ghub-main {
background: #0d0d0d;
}
[data-template-family="network"] .ghub-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem 2.5rem;
}
[data-template-family="network"] .ghub-section--last {
padding-bottom: 3rem;
}
[data-template-family="network"] .ghub-count {
color: rgba(255,255,255,0.35);
font-size: 0.75rem;
}
[data-template-family="network"] .ghub-cta {
color: #fa9101;
font-size: 0.85rem;
font-weight: 600;
}
/* ── Image card: tall portrait + always-visible credit bar ── */
[data-template-family="network"] .ghub-img-card {
position: relative;
overflow: hidden;
background: #111;
flex: 1;
min-width: 0;
min-height: 220px;
border-radius: 0;
}
/* Photo fill */
[data-template-family="network"] .ghub-img-card__photo {
position: absolute;
inset: 0;
background: #1a1a1a center/cover no-repeat;
transition: transform 0.4s ease;
}
[data-template-family="network"] .ghub-panel:hover .ghub-img-card__photo,
[data-template-family="network"] .ghub-hero-images:hover .ghub-img-card__photo {
transform: scale(1.03);
}
/* Credit bar — ALWAYS visible, pinned to bottom */
[data-template-family="network"] .ghub-img-card__credit {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1.8rem 0.6rem 0.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
display: flex;
flex-direction: column;
gap: 1px;
pointer-events: none;
}
[data-template-family="network"] .ghub-img-card__artist {
font-size: 0.68rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
[data-template-family="network"] .ghub-img-card__loc {
font-size: 0.6rem;
color: rgba(255,255,255,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
/* ── Row 1: Tattoo Gallery hero — 25% copy left | 75% images right ── */
[data-template-family="network"] .ghub-hero-row {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
align-items: stretch;
padding-top: 2rem;
}
/* Three portrait cards side by side — tall because of aspect-ratio 2/3 */
[data-template-family="network"] .ghub-hero-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
min-width: 0;
}
[data-template-family="network"] .ghub-hero-images .ghub-img-card {
border-radius: 0;
}
[data-template-family="network"] .ghub-hero-images .ghub-img-card--a { border-radius: 12px 0 0 12px; }
[data-template-family="network"] .ghub-hero-images .ghub-img-card--c { border-radius: 0 12px 12px 0; }
/* Editorial copy */
[data-template-family="network"] .ghub-hero-copy {
display: flex;
flex-direction: column;
justify-content: center;
text-decoration: none;
color: inherit;
padding: 1rem 0;
min-width: 0;
}
[data-template-family="network"] .ghub-hero-label {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #fa9101;
margin-bottom: 0.75rem;
}
[data-template-family="network"] .ghub-hero-title {
font-size: 2.4rem;
font-weight: 900;
line-height: 1.05;
color: #fff;
margin: 0 0 1rem;
letter-spacing: -0.02em;
}
[data-template-family="network"] a .ghub-hero-title::after,
[data-template-family="network"] .ghub-hero-title a::after {
content: ' →';
font-size: 0.6em;
color: #fa9101;
vertical-align: middle;
font-weight: 700;
letter-spacing: 0;
transition: transform 0.15s;
display: inline-block;
}
[data-template-family="network"] a:hover .ghub-hero-title::after,
[data-template-family="network"] .ghub-hero-title a:hover::after {
transform: translateX(4px);
}
[data-template-family="network"] .ghub-hero-desc {
color: rgba(255,255,255,0.55);
font-size: 0.93rem;
line-height: 1.6;
margin: 0 0 1.5rem;
}
[data-template-family="network"] .ghub-hero-cta {
display: inline-block;
color: #fa9101;
font-size: 0.88rem;
font-weight: 700;
text-decoration: none;
margin-top: auto;
}
[data-template-family="network"] .ghub-hero-links {
list-style: none;
margin: 0.5rem 0 1rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
[data-template-family="network"] .ghub-hero-links li a {
color: rgba(255,255,255,0.6);
font-size: 0.85rem;
text-decoration: none;
transition: color 0.15s;
}
[data-template-family="network"] .ghub-hero-links li a:hover {
color: #fa9101;
}
/* ── Rows 2+3: Split panels — both 75/25 to match row 1 ── */
/* Split rows use a 4-column flat grid matching the hero row's 4 × 25% columns.
Large panel spans cols 1-3 (75%), small panel spans col 4 (25%).
Inside each large panel, __body aligns to col 1, __portraits to cols 2-3. */
[data-template-family="network"] .ghub-split {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.25rem;
align-items: stretch;
}
[data-template-family="network"] .ghub-split--2-1 > :first-child,
[data-template-family="network"] .ghub-split--3-1 > :first-child { grid-column: span 3; }
[data-template-family="network"] .ghub-split--2-1 > :last-child,
[data-template-family="network"] .ghub-split--3-1 > :last-child { grid-column: span 1; }
/* Panel shell — 4-col subgrid so inner body/portraits align to the outer columns */
[data-template-family="network"] .ghub-panel {
display: grid;
grid-template-columns: subgrid;
text-decoration: none;
background: #141414;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 16px;
overflow: hidden;
color: inherit;
transition: border-color 0.2s, box-shadow 0.2s;
}
[data-template-family="network"] .ghub-panel:hover {
border-color: rgba(250,145,1,0.4);
box-shadow: 0 6px 32px rgba(250,145,1,0.08);
}
/* Image strip — spans the remaining columns (cols 2-3 of the large panel) */
[data-template-family="network"] .ghub-panel__portraits {
display: grid;
grid-column: span 2;
overflow: hidden;
}
[data-template-family="network"] .ghub-panel__portraits--3 { grid-template-columns: repeat(3, 1fr); }
[data-template-family="network"] .ghub-panel__portraits--2 { grid-template-columns: repeat(2, 1fr); }
/* Image cards inside panels */
[data-template-family="network"] .ghub-panel__portraits .ghub-img-card {
border-radius: 0;
min-height: 200px;
}
/* Panel copy — occupies col 1 of the panel's subgrid */
[data-template-family="network"] .ghub-panel__body {
grid-column: 1;
padding: 1.25rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
min-width: 0;
text-decoration: none;
color: inherit;
}
[data-template-family="network"] .ghub-panel__title {
font-size: 1.1rem;
font-weight: 800;
color: #fff;
letter-spacing: -0.01em;
}
[data-template-family="network"] a .ghub-panel__title::after {
content: ' →';
font-size: 0.75em;
color: #fa9101;
font-weight: 700;
letter-spacing: 0;
transition: transform 0.15s;
display: inline-block;
}
[data-template-family="network"] a:hover .ghub-panel__title::after {
transform: translateX(3px);
}
[data-template-family="network"] .ghub-panel__desc {
color: rgba(255,255,255,0.5);
font-size: 0.83rem;
line-height: 1.5;
flex: 1;
}
[data-template-family="network"] .ghub-panel__foot {
display: flex;
flex-direction: column;
gap: 0.35rem;
margin-top: 0.65rem;
}
/* ── Solo (1-col) panel — text/CTA only, no image strip, uses flex not subgrid ── */
[data-template-family="network"] .ghub-panel--solo {
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
min-height: 280px;
}
[data-template-family="network"] .ghub-panel--solo .ghub-panel__body {
grid-column: unset;
position: relative;
z-index: 1;
}
[data-template-family="network"] .ghub-panel__body--overlay {
background: linear-gradient(to top, rgba(0,0,0,0.85) 60%, transparent);
padding-top: 3rem;
}
/* ── Arena panel ── */
[data-template-family="network"] .ghub-panel--arena {
background: #080808;
position: relative;
justify-content: flex-end;
}
[data-template-family="network"] .ghub-arena-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(22px) brightness(0.2) saturate(0.4);
transform: scale(1.1);
}
[data-template-family="network"] .ghub-arena-inner {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 1.5rem 1rem;
}
[data-template-family="network"] .ghub-arena-phone {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
[data-template-family="network"] .ghub-arena-card {
position: relative;
width: 100px;
height: 133px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 32px rgba(0,0,0,0.8);
border: 1px solid rgba(255,255,255,0.14);
}
[data-template-family="network"] .ghub-arena-img {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
[data-template-family="network"] .ghub-arena-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
display: flex;
align-items: flex-end;
padding: 7px;
}
[data-template-family="network"] .ghub-arena-tag {
font-size: 0.52rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
background: rgba(0,0,0,0.5);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 3px;
padding: 2px 5px;
}
[data-template-family="network"] .ghub-arena-actions {
display: flex;
gap: 14px;
}
[data-template-family="network"] .ghub-arena-btn {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 700;
box-shadow: 0 4px 14px rgba(0,0,0,0.6);
}
[data-template-family="network"] .ghub-arena-btn--no {
background: #1e1e1e;
color: #ff4d4d;
border: 1.5px solid rgba(255,77,77,0.4);
}
[data-template-family="network"] .ghub-arena-btn--yes {
background: #1a2e1a;
color: #4dff88;
border: 1.5px solid rgba(77,255,136,0.4);
}
/* CTA text under phone mockup */
[data-template-family="network"] .ghub-arena-copy {
text-align: center;
}
[data-template-family="network"] .ghub-arena-eyebrow {
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 0.2rem;
}
[data-template-family="network"] .ghub-arena-name {
font-size: 1.8rem;
font-weight: 900;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
[data-template-family="network"] .ghub-arena-sub {
font-size: 0.72rem;
color: #fa9101;
font-weight: 600;
margin-top: 0.3rem;
}
/* ── Row 4: Directory strip ── */
[data-template-family="network"] .ghub-dir-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 1.5rem;
}
[data-template-family="network"] .ghub-dir-item {
display: flex;
flex-direction: column;
gap: 0.2rem;
text-decoration: none;
padding: 1rem 1.1rem;
background: #141414;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px;
color: inherit;
transition: border-color 0.18s, background 0.18s;
}
[data-template-family="network"] .ghub-dir-item:hover {
border-color: rgba(250,145,1,0.4);
background: #1a1a1a;
}
[data-template-family="network"] .ghub-dir-item__title {
font-size: 0.9rem;
font-weight: 700;
color: #fff;
}
[data-template-family="network"] .ghub-dir-item__desc {
font-size: 0.75rem;
color: rgba(255,255,255,0.4);
flex: 1;
margin-bottom: 0.5rem;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
[data-template-family="network"] .ghub-hero-title { font-size: 1.9rem; }
}
@media (max-width: 800px) {
[data-template-family="network"] .ghub-hero-row { grid-template-columns: 1fr; }
[data-template-family="network"] .ghub-hero-images { grid-template-columns: repeat(3, 1fr); }
[data-template-family="network"] .ghub-hero-copy { padding: 0; }
[data-template-family="network"] .ghub-hero-title { font-size: 1.65rem; }
[data-template-family="network"] .ghub-split { grid-template-columns: 1fr; }
[data-template-family="network"] .ghub-split--2-1 > :first-child,
[data-template-family="network"] .ghub-split--3-1 > :first-child { grid-column: 1; }
[data-template-family="network"] .ghub-split--2-1 > :last-child,
[data-template-family="network"] .ghub-split--3-1 > :last-child { grid-column: 1; }
[data-template-family="network"] .ghub-panel { grid-template-columns: 1fr; }
[data-template-family="network"] .ghub-panel__portraits { grid-column: 1; }
[data-template-family="network"] .ghub-panel__body { grid-column: 1; }
[data-template-family="network"] .ghub-panel--arena { min-height: 260px; }
[data-template-family="network"] .ghub-dir-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
[data-template-family="network"] .ghub-section { padding-left: 1rem; padding-right: 1rem; }
[data-template-family="network"] .ghub-dir-strip { gap: 0.75rem; }
}
/* ════════════════════════════════════════════════════════════════
Gallery hub stacked layout (.gab-*) — 2026-06-16, "Sean's version"
Stacked galleries (Tattoos → Piercings → Art), each an amber-framed
card: vintage display title doubles as the button (red "click here"
sticker), brush-script flourishes on/over the thumbnails, and a
handwritten upload-date overlay on every thumbnail.
════════════════════════════════════════════════════════════════ */
/* ── Stacked rows ── */
[data-template-family="network"] .gab-stack { padding-top: 0.5rem; }
[data-template-family="network"] .gab-row {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 2rem;
align-items: stretch;
padding: 1.75rem 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
[data-template-family="network"] .gab-row:first-child { padding-top: 0.75rem; }
[data-template-family="network"] .gab-row:last-child { border-bottom: 0; }
[data-template-family="network"] .gab-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
/* Right column: holds the optional "latest …" banner above the thumbnail grid */
[data-template-family="network"] .gab-imgs-col {
display: flex;
flex-direction: column;
min-width: 0;
position: relative;
}
[data-template-family="network"] .gab-imgs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
min-width: 0;
flex: 1;
}
/* ── Thumbnail card (shared) ── */
[data-template-family="network"] .gab-card {
position: relative;
display: block;
overflow: hidden;
background: #1a1a1a;
min-height: 320px;
border-radius: 10px;
text-decoration: none;
color: inherit;
}
[data-template-family="network"] .gab-card__photo {
position: absolute;
inset: 0;
background: #1a1a1a center/cover no-repeat;
transition: transform 0.45s ease;
}
[data-template-family="network"] .gab-card:hover .gab-card__photo { transform: scale(1.05); }
[data-template-family="network"] .gab-card__credit {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
padding: 1.6rem 0.7rem 0.6rem;
background: linear-gradient(to top, rgba(0,0,0,0.88), transparent);
pointer-events: none;
display: flex;
flex-direction: column;
gap: 1px;
}
[data-template-family="network"] .gab-card__artist {
font-size: 0.72rem;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
[data-template-family="network"] .gab-card__loc {
font-size: 0.62rem;
color: rgba(255,255,255,0.6);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
[data-template-family="network"] .gab-arr { display: inline-block; transition: transform 0.15s; }
/* ── Sub-links (plain text rows: "Browse by category/artist") ── */
[data-template-family="network"] .gab-links {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
[data-template-family="network"] .gab-links a {
color: rgba(255,255,255,0.55);
font-size: 0.85rem;
text-decoration: none;
transition: color 0.15s;
}
[data-template-family="network"] .gab-links a:hover { color: #fa9101; }
/* =========================================================
VARIANT A — Sean's version (vintage / framed editorial)
Faithful to Sean's reference: each gallery is a single amber-
framed card; warm-cream western display title doubles as the
button (red "click here" sticker); brush-script "latest …"
header + "vote for your favorites!" flourish over the thumbs.
========================================================= */
[data-template-family="network"] .gab--a.gab-row {
padding: 1.6rem 1.75rem;
margin-bottom: 1.5rem;
border: 1px solid rgba(250,145,1,0.55);
border-radius: 16px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(250,145,1,0.06), transparent 60%),
#100d09;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
[data-template-family="network"] .gab--a.gab-row:first-child { padding-top: 1.6rem; }
[data-template-family="network"] .gab--a.gab-row:last-child { margin-bottom: 0; }
/* Brush-script "latest tattoos…" — banner on top of the thumbnails */
[data-template-family="network"] .gab--a .gab-script {
font-family: 'Kaushan Script', 'Caveat', cursive;
font-size: 2.4rem;
line-height: 1;
color: #fa9101;
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
[data-template-family="network"] .gab--a .gab-script--banner {
margin: 0 0 0.55rem;
padding-left: 0.15rem;
align-self: flex-start;
}
/* Small count line at the top of the copy column */
[data-template-family="network"] .gab--a .gab-count {
font-size: 0.8rem;
color: rgba(236,224,200,0.5);
margin-bottom: 0.5rem;
max-width: 18ch;
}
/* The display title doubles as the button */
[data-template-family="network"] .gab--a .gab-titlelink {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
margin: 0.25rem 0 0.9rem;
}
[data-template-family="network"] .gab--a .gab-title {
font-family: 'Rye', 'Roboto Slab', serif;
font-weight: 400;
font-size: 3.2rem;
line-height: 0.92;
letter-spacing: 0.01em;
color: #ece0c8;
text-shadow: 0 2px 0 rgba(0,0,0,0.35);
transition: color 0.15s, text-shadow 0.15s;
}
[data-template-family="network"] .gab--a .gab-titlelink:hover .gab-title {
color: #fff7e6;
text-shadow: 0 2px 14px rgba(250,145,1,0.45);
}
/* Red "click here" sticker — the explicit "this is a button" cue */
[data-template-family="network"] .gab--a .gab-clickhere {
font-family: 'Kaushan Script', 'Caveat', cursive;
font-size: 1.15rem;
line-height: 1;
color: #fff;
background: #d63b2f;
padding: 0.22rem 0.7rem 0.3rem;
border-radius: 6px;
transform: rotate(-4deg);
margin-top: 0.4rem;
box-shadow: 0 3px 10px rgba(214,59,47,0.4);
transition: transform 0.15s;
}
[data-template-family="network"] .gab--a .gab-titlelink:hover .gab-clickhere {
transform: rotate(-4deg) scale(1.05);
}
/* "vote for your favorites!" brush-script flourish, bottom-right of the thumbs */
[data-template-family="network"] .gab--a .gab-vote {
position: absolute;
right: 0.6rem;
bottom: 0.55rem;
z-index: 4;
max-width: 60%;
text-align: right;
font-family: 'Kaushan Script', 'Caveat', cursive;
font-size: 1.7rem;
line-height: 1.05;
color: #ffb43a;
text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.8);
pointer-events: none;
}
/* Variant A date overlay — handwritten "uploaded" tag, top-right */
[data-template-family="network"] .gab--a .gab-card__date {
position: absolute;
top: 0.55rem;
right: 0.55rem;
z-index: 3;
font-family: 'Caveat', cursive;
font-size: 1.05rem;
line-height: 1;
color: #fff;
background: rgba(0,0,0,0.55);
border: 1px solid rgba(255,255,255,0.25);
padding: 0.2rem 0.6rem 0.1rem;
border-radius: 999px;
backdrop-filter: blur(3px);
}
[data-template-family="network"] .gab--a .gab-card__cue {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
transform: translate(-50%, -50%) scale(0.9);
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
font-family: 'Caveat', cursive;
font-size: 1.5rem;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.9);
pointer-events: none;
}
[data-template-family="network"] .gab--a .gab-card:hover .gab-card__cue {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* ── Responsive ── */
@media (max-width: 860px) {
[data-template-family="network"] .gab-row { grid-template-columns: 1fr; gap: 1.2rem; }
[data-template-family="network"] .gab--a.gab-row { padding: 1.25rem; }
[data-template-family="network"] .gab--a .gab-title { font-size: 2.4rem; }
[data-template-family="network"] .gab-card { min-height: 240px; }
}
@media (max-width: 520px) {
[data-template-family="network"] .gab-imgs { grid-template-columns: 1fr 1fr; }
[data-template-family="network"] .gab-imgs .gab-card:nth-child(3) { display: none; }
[data-template-family="network"] .gab--a .gab-vote { font-size: 1.3rem; }
}
/* Anchor the Ask TattooNOW section below the sticky 52px top bar so
smooth-scroll from the pill (and any in-page #ask-tattoonow link)
doesn't hide the section header behind the nav. */
[data-template-family="network"] #ask-tattoonow {
scroll-margin-top: 64px;
}
/* Floating mobile "Ask" pill — bottom-right, above the ticker. The
ticker is 28px on mobile so 56px clearance keeps the pill clear.
Hidden above the mobile breakpoint since the section is within
easy reach on desktop. */
[data-template-family="network"] .ask-pill {
display: none;
}
@media (max-width: 768px) {
[data-template-family="network"] .ask-pill {
display: inline-flex;
align-items: center;
gap: 6px;
position: fixed;
right: 14px;
bottom: calc(40px + env(safe-area-inset-bottom, 0px));
z-index: 1003;
padding: 9px 14px;
border-radius: 999px;
background: linear-gradient(135deg, #fa9101, #EA9320);
color: #0a0a0a;
font-family: 'Roboto', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
box-shadow: 0 8px 20px rgba(0,0,0,0.45), 0 2px 6px rgba(250,145,1,0.35);
}
[data-template-family="network"] .ask-pill__icon {
font-size: 0.95rem;
}
/* Hide the floating pill while the mobile drawer is open — the
drawer's primary CTA owns the bottom-right corner during that
state and the pill (z:1003) was sitting on top of it. */
body[data-template-family="network"].drawer-open .ask-pill {
display: none;
}
}
/* ============================================================
Phase E — /get-listed persona-tile grid
============================================================ */
[data-template-family="network"] .get-listed-grid {
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
[data-template-family="network"] .get-listed-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
[data-template-family="network"] .get-listed-grid {
grid-template-columns: repeat(5, 1fr);
}
}
[data-template-family="network"] .get-listed-card {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 1.4rem 1.25rem 1.25rem;
background: rgba(10,10,10,0.6);
border: 1px solid rgba(250,145,1,0.18);
border-radius: 12px;
color: inherit;
text-decoration: none;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
[data-template-family="network"] .get-listed-card:hover {
transform: translateY(-3px);
border-color: rgba(250,145,1,0.5);
box-shadow: 0 14px 32px rgba(0,0,0,0.45);
}
[data-template-family="network"] .get-listed-card__badge {
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #115E7B;
background: rgba(17,94,123,0.12);
padding: 4px 9px;
border-radius: 4px;
align-self: flex-start;
}
[data-template-family="network"] .get-listed-card__title {
font-family: 'Roboto', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: #f1f1f1;
line-height: 1.25;
margin: 0.2rem 0 0;
}
[data-template-family="network"] .get-listed-card__blurb {
font-size: 0.85rem;
color: rgba(255,255,255,0.65);
margin: 0;
}
[data-template-family="network"] .get-listed-card__bullets {
list-style: none;
padding: 0;
margin: 0.2rem 0 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
[data-template-family="network"] .get-listed-card__bullets li {
position: relative;
padding-left: 1rem;
font-size: 0.78rem;
color: rgba(255,255,255,0.7);
}
[data-template-family="network"] .get-listed-card__bullets li::before {
content: '\2713';
position: absolute;
left: 0;
color: #EA9320;
font-size: 0.75rem;
}
[data-template-family="network"] .get-listed-card__cta {
margin-top: auto;
padding-top: 0.6rem;
font-size: 0.82rem;
font-weight: 600;
color: #EA9320;
}
/* ============================================================
Category index — /gallery/tattoos/keyword + artist discover-more
============================================================ */
[data-template-family="network"] .category-index {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
[data-template-family="network"] .category-index__group {
scroll-margin-top: 64px;
}
[data-template-family="network"] .category-index__heading {
font-family: 'Roboto Slab', serif;
font-size: 1.5rem;
color: #f1f1f1;
margin: 0 0 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(250,145,1,0.18);
}
/* Three-tile "Find by Style / Subject / Body Part" CTA used on the
artist page (and reusable for other discovery surfaces). 1-up on
mobile, 3-up at ≥640 — these are big chunky buttons, no need for
a 2-up intermediate. */
[data-template-family="network"] .discover-more-grid {
display: grid;
gap: 1rem;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
[data-template-family="network"] .discover-more-grid {
grid-template-columns: repeat(3, 1fr);
}
}
[data-template-family="network"] .discover-more-card {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1.25rem 1.25rem 1rem;
background: rgba(10,10,10,0.55);
border: 1px solid rgba(250,145,1,0.2);
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
[data-template-family="network"] .discover-more-card:hover {
transform: translateY(-2px);
border-color: rgba(250,145,1,0.55);
background: rgba(10,10,10,0.85);
}
[data-template-family="network"] .discover-more-card__label {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
}
[data-template-family="network"] .discover-more-card__title {
font-family: 'Roboto Slab', serif;
font-size: 1.4rem;
color: #f1f1f1;
line-height: 1.1;
}
[data-template-family="network"] .discover-more-card__cta {
margin-top: 0.45rem;
font-size: 0.85rem;
font-weight: 600;
color: #EA9320;
}
/* ============================================================
Ad-engine banner variant
Used by phase-2 slots: home-band-1, events-hero-side,
image-detail-continue. Three sizes via modifier classes set on
the surrounding container, falling back to the default wide
card if no modifier is set.
============================================================ */
[data-template-family="network"] .ad-banner {
position: relative;
display: flex;
gap: 1.25rem;
align-items: stretch;
padding: 1.1rem 1.4rem;
background: linear-gradient(135deg, rgba(250,145,1,0.10), rgba(17,94,123,0.10));
border: 1px solid rgba(250,145,1,0.28);
border-radius: 10px;
color: inherit;
text-decoration: none;
transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
overflow: hidden;
}
[data-template-family="network"] .ad-banner::before {
content: 'Sponsored';
position: absolute;
top: 8px;
right: 12px;
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.35);
}
[data-template-family="network"] .ad-banner:hover {
transform: translateY(-2px);
border-color: rgba(250,145,1,0.55);
box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}
[data-template-family="network"] .ad-banner__img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 8px;
flex-shrink: 0;
background: #111;
}
[data-template-family="network"] .ad-banner__body {
display: flex;
flex-direction: column;
gap: 0.35rem;
justify-content: center;
min-width: 0;
}
[data-template-family="network"] .ad-banner__headline {
font-family: 'Roboto Slab', serif;
font-size: 1.15rem;
font-weight: 600;
color: #f1f1f1;
line-height: 1.25;
}
[data-template-family="network"] .ad-banner__body-copy {
font-size: 0.85rem;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}
[data-template-family="network"] .ad-banner__cta {
margin-top: 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: #EA9320;
}
/* Square aside variant — used by events-hero-side + image-detail-
continue where the surrounding layout is a column or sidebar. */
[data-template-family="network"] .ad-banner--square {
flex-direction: column;
align-items: stretch;
padding: 0;
gap: 0;
}
[data-template-family="network"] .ad-banner--square .ad-banner__img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
border-radius: 10px 10px 0 0;
}
[data-template-family="network"] .ad-banner--square .ad-banner__body {
padding: 1rem 1.1rem 1.2rem;
}
@media (max-width: 640px) {
[data-template-family="network"] .ad-banner:not(.ad-banner--square) {
flex-direction: column;
gap: 0.6rem;
}
[data-template-family="network"] .ad-banner:not(.ad-banner--square) .ad-banner__img {
width: 100%;
height: 160px;
}
}
/* ============================================================
ConsultFormEmbed — HighLevel iframe surround
============================================================ */
[data-template-family="network"] .consult-embed {
background: rgba(10,10,10,0.55);
border: 1px solid rgba(250,145,1,0.18);
border-radius: 10px;
padding: 1.25rem 1.4rem 1.4rem;
}
[data-template-family="network"] .consult-embed__heading {
font-family: 'Roboto Slab', serif;
font-size: 1.3rem;
color: #f1f1f1;
margin: 0 0 0.4rem;
}
[data-template-family="network"] .consult-embed__blurb {
color: rgba(255,255,255,0.65);
font-size: 0.92rem;
margin: 0 0 1rem;
line-height: 1.5;
}
[data-template-family="network"] .consult-embed iframe {
display: block;
}
[data-template-family="network"] .consult-embed--fallback {
border-color: rgba(250,145,1,0.35);
background: rgba(10,10,10,0.7);
}
[data-template-family="network"] .consult-embed__fallback-copy {
color: rgba(255,255,255,0.65);
font-size: 0.92rem;
margin: 0 0 1rem;
}
[data-template-family="network"] .consult-embed__fallback-cta {
display: inline-block;
}
/* ============================================================
ConsultForm — self-hosted consult form (POSTs to /api/consult)
============================================================ */
[data-template-family="network"] .consult-form {
background: color-mix(in srgb, var(--color-bg-secondary, #141414) 80%, transparent);
border: 1px solid var(--color-accent-border, rgba(250,145,1,0.3));
border-radius: 10px;
padding: 1.5rem 1.6rem 1.6rem;
display: flex;
flex-direction: column;
gap: 0.85rem;
}
[data-template-family="network"] .consult-form__heading {
font-family: var(--font-heading, 'Roboto Slab'), serif;
font-size: 1.35rem;
color: var(--color-text-primary, #f1f1f1);
margin: 0;
}
[data-template-family="network"] .consult-form__blurb {
color: color-mix(in srgb, var(--color-text-primary, #fff) 65%, transparent);
font-size: 0.92rem;
margin: 0;
line-height: 1.5;
}
[data-template-family="network"] .consult-form__hint {
color: color-mix(in srgb, var(--color-text-primary, #fff) 55%, transparent);
font-size: 0.82rem;
margin: 0.5rem 0 0;
line-height: 1.4;
}
[data-template-family="network"] .consult-form__hint--refs {
margin: 0 0 0.5rem;
}
[data-template-family="network"] .consult-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
@media (max-width: 640px) {
[data-template-family="network"] .consult-form__row {
grid-template-columns: 1fr;
}
}
[data-template-family="network"] .consult-form__field {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.85rem;
}
[data-template-family="network"] .consult-form__field > span {
color: color-mix(in srgb, var(--color-text-primary, #fff) 70%, transparent);
font-size: 0.82rem;
}
[data-template-family="network"] .consult-form__field input,
[data-template-family="network"] .consult-form__field textarea,
[data-template-family="network"] .consult-form__field select {
background: var(--color-bg-secondary, #1a1a1a);
border: 1px solid var(--color-border, #2a2a2a);
border-radius: 6px;
color: var(--color-text-primary, #f1f1f1);
font-family: var(--font-body, inherit);
/* Mobile: 16px minimum prevents iOS Safari from zooming in on focus
(the trigger threshold is anything below 16px). The previous 0.92rem
was ~14.7px on default-size mobile, which fired the zoom. Bumping
just on small viewports avoids changing desktop typography. */
font-size: 0.92rem;
padding: 0.6rem 0.75rem;
/* Prevent the artist-picker