/* 01 Tide Chart: homepage CSS (round 1, approved) + interiors (round 2). Shared nav lives in assets/nav.css. */ /* ===== 01 Tide Chart. Scope: body[data-concept="01"], prefix .tc- ===== */ @property --depth { syntax: ''; inherits: true; initial-value: 0; } body[data-concept="01"] { --depth: 0; background: var(--tc-page); } /* ---------- Depth gauge (desktop) and progress line (mobile) ---------- */ body[data-concept="01"] .tc-prog { position: fixed; top: 0; left: 0; height: 3px; width: calc(var(--depth) * 1%); background: var(--teal); z-index: 90; pointer-events: none; } body[data-concept="01"] .tc-gauge { display: none; } @media (min-width: 992px) { body[data-concept="01"] .tc-prog { display: none; } body[data-concept="01"] .tc-gauge { display: block; position: fixed; left: 22px; top: 18vh; height: 58vh; width: 72px; z-index: 70; pointer-events: none; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--tc-gauge-fg); } body[data-concept="01"] .tc-gauge-read { position: absolute; left: 0; top: -40px; white-space: nowrap; font-weight: 700; } body[data-concept="01"] .tc-gauge-read::before { content: "DEPTH "; color: var(--tc-gauge-acc); } body[data-concept="01"] .tc-gauge-read::after { counter-reset: tcdepth var(--depth); content: counter(tcdepth) " ft"; } body[data-concept="01"] .tc-gauge-rule { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: rgba(var(--tc-gauge-rgb),.35); } body[data-concept="01"] .tc-gauge-rule::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; background: repeating-linear-gradient(to bottom, rgba(var(--tc-gauge-rgb),.35) 0 1px, transparent 1px 10%); } body[data-concept="01"] .tc-tick { position: absolute; left: 14px; top: calc(var(--at) * 1%); transform: translateY(-50%); white-space: nowrap; color: rgba(var(--tc-gauge-rgb),.85); } body[data-concept="01"] .tc-tick::before { content: ""; position: absolute; left: -14px; top: 50%; width: 10px; height: 1px; background: var(--tc-gauge-fg); } body[data-concept="01"] .tc-gauge-pin { position: absolute; left: -5px; top: calc(var(--depth) * 1%); width: 11px; height: 11px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(var(--tc-glow),.25), 0 0 18px rgba(var(--tc-glow),.6); transform: translateY(-50%); transition: top .4s var(--ease); } } @supports (animation-timeline: scroll()) { body[data-concept="01"] { animation: tc-depth linear both; animation-timeline: scroll(root); } body[data-concept="01"] .tc-gauge-pin { transition: none; } } @keyframes tc-depth { from { --depth: 0; } to { --depth: 100; } } /* ---------- Big outlined display type ---------- */ body[data-concept="01"] .tc-disp { -webkit-text-stroke: 1.5px var(--tc-stroke); paint-order: stroke fill; color: var(--fill, transparent); line-height: .92; letter-spacing: .01em; } @media (min-width: 768px) { body[data-concept="01"] .tc-disp { -webkit-text-stroke-width: 2px; } } body[data-concept="01"] .tc-h2 { font-size: clamp(42px, 9.5vw, 136px); margin: 0 0 .25em; } body[data-concept="01"] .tc-depthlbl { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc); margin-bottom: 18px; } body[data-concept="01"] .tc-depthlbl::before { content: ""; width: 34px; height: 1px; background: var(--tc-acc); } @supports (animation-timeline: view()) { body[data-concept="01"] .tc-disp.tc-fill { animation: tc-fill linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; } } @keyframes tc-fill { from { color: transparent; } to { color: var(--fill); } } /* ---------- Section grounds: the descent ---------- */ body[data-concept="01"] .tc-s10 { background: var(--tc-g10); } body[data-concept="01"] .tc-s30 { background: linear-gradient(180deg, var(--tc-g30a) 0%, var(--tc-g30b) 100%); } body[data-concept="01"] .tc-s60 { background: var(--tc-g60); } body[data-concept="01"] .tc-s80 { background: linear-gradient(180deg, var(--tc-g80a) 0%, var(--tc-g80b) 100%); } body[data-concept="01"] .tc-s90 { background: var(--tc-g90); } body[data-concept="01"] .tc-s100 { background: linear-gradient(180deg, var(--tc-g100a) 0%, var(--tc-g100b) 100%); } body[data-concept="01"] .tc-ftr { background: var(--tc-gftr); } body[data-concept="01"] section { position: relative; overflow: clip; } /* ---------- Hero: the surface ---------- */ body[data-concept="01"] .tc-hero { min-height: calc(100svh - 64px); display: flex; flex-direction: column; justify-content: flex-end; } body[data-concept="01"] .tc-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } body[data-concept="01"] .tc-hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--tc-gl),.22) 0%, rgba(var(--tc-gl),0) 22%, rgba(var(--tc-sc),.45) 48%, rgba(var(--tc-sc),.92) 100%); } body[data-concept="01"] .tc-hero-surface { position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2; background: linear-gradient(90deg, rgba(var(--tc-gl),0), rgba(var(--tc-gl),.9), rgba(var(--tc-gl),0)); background-size: 200% 100%; animation: tc-glint 7s linear infinite; } @keyframes tc-glint { from { background-position: 200% 0; } to { background-position: -200% 0; } } body[data-concept="01"] .tc-hero-in { position: relative; z-index: 2; width: min(1440px, 100% - 32px); margin-inline: auto; padding: 30vh 0 34px; } body[data-concept="01"] .tc-hero h1 { font-size: clamp(60px, 14vw, 215px); margin: 0 0 18px; max-width: 12ch; } body[data-concept="01"] .tc-hero .lede { color: var(--tc-fg); max-width: 46ch; font-size: clamp(17px, 1.5vw, 21px); margin-bottom: 22px; } body[data-concept="01"] .tc-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; } body[data-concept="01"] .tc-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-fg); } body[data-concept="01"] .tc-trust li { display: inline-flex; align-items: center; gap: 8px; } body[data-concept="01"] .tc-trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } @media (min-width: 992px) { body[data-concept="01"] .tc-hero-in { padding-left: 100px; padding-bottom: 48px; } } /* ---------- Pick your water ---------- */ body[data-concept="01"] .tc-water { background: var(--tc-gwater); border-top: 1px solid rgba(var(--tc-ln),.08); } body[data-concept="01"] .tc-water-in { width: min(1440px, 100% - 32px); margin-inline: auto; padding: 18px 0 16px; } body[data-concept="01"] .tc-water-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; } body[data-concept="01"] .tc-water-head h2 { font-size: 22px; margin: 0; letter-spacing: .03em; } body[data-concept="01"] .tc-water-read { margin: 0; color: var(--bs-secondary-color); font-size: 15px; } body[data-concept="01"] .tc-water-read a { color: var(--tc-acc); font-weight: 600; } body[data-concept="01"] .tc-chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; margin: 0; list-style: none; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body[data-concept="01"] .tc-chips::-webkit-scrollbar { display: none; } body[data-concept="01"] .tc-chips li { scroll-snap-align: start; flex: 0 0 auto; } body[data-concept="01"] .tc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(var(--tc-ln),.3); color: var(--tc-fg); text-decoration: none; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); background: transparent; cursor: pointer; } body[data-concept="01"] .tc-chip:hover { border-color: var(--tc-acc); color: var(--tc-acc); } body[data-concept="01"] .tc-chip[aria-current="true"] { background: var(--teal); color: var(--ink); border-color: var(--teal); } body[data-concept="01"] .tc-chip .mono { opacity: .7; } body[data-concept="01"] .tc-chip[aria-current="true"] .mono { opacity: 1; } @media (min-width: 992px) { body[data-concept="01"] .tc-water-in { padding-left: 100px; } body[data-concept="01"] .tc-chips { flex-wrap: wrap; overflow: visible; } } /* ---------- Products: 10 ft, sinking past you ---------- */ body[data-concept="01"] .tc-wrap { width: min(1240px, 100% - 32px); margin-inline: auto; padding-top: var(--gap); padding-bottom: var(--gap); position: relative; z-index: 1; } @media (min-width: 992px) { body[data-concept="01"] .tc-wrap { width: min(1240px, 100% - 200px); } } body[data-concept="01"] .tc-sink { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 576px) { body[data-concept="01"] .tc-sink { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (min-width: 992px) { body[data-concept="01"] .tc-sink { grid-template-columns: repeat(3, 1fr); gap: 28px; } body[data-concept="01"] .tc-sink > :nth-child(2) { margin-top: 72px; } body[data-concept="01"] .tc-sink > :nth-child(3) { margin-top: 24px; } body[data-concept="01"] .tc-sink > :nth-child(4) { margin-top: -40px; } body[data-concept="01"] .tc-sink > :nth-child(5) { margin-top: 56px; } body[data-concept="01"] .tc-sink > :nth-child(6) { margin-top: 10px; } } body[data-concept="01"] .tc-prod { display: block; color: var(--bs-body-color); text-decoration: none; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease); } body[data-concept="01"] .tc-prod .tc-float { position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 14px 14px 0 0; } body[data-concept="01"] .tc-prod .tc-float img { width: 78%; height: 78%; object-fit: contain; animation: tc-bob 6s ease-in-out infinite; animation-delay: var(--delay, 0s); filter: drop-shadow(0 24px 30px rgba(var(--tc-sh),.45)); } body[data-concept="01"] .tc-prod .tc-float::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, transparent 38%, rgba(var(--tc-gl),.16) 50%, transparent 62%); background-size: 260% 100%; animation: tc-caustic 9s linear infinite; animation-delay: var(--delay, 0s); mix-blend-mode: screen; } @keyframes tc-bob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } } @keyframes tc-caustic { from { background-position: 200% 0; } to { background-position: -100% 0; } } body[data-concept="01"] .tc-prod .card-body { padding: 16px 18px 18px; } body[data-concept="01"] .tc-prod h3 { font-family: Barlow, "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: 700; font-size: 18px; letter-spacing: 0; line-height: 1.25; margin: 0 0 8px; } body[data-concept="01"] .tc-prod-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } body[data-concept="01"] .tc-stock { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-prod .tc-view { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 600; color: var(--tc-acc); font-size: 15px; } body[data-concept="01"] .tc-prod .tc-view svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-prod.is-miss { opacity: .5; } body[data-concept="01"] .tc-prod.is-fit { transform: translateY(-8px); box-shadow: 0 0 0 1px var(--teal), 0 24px 48px rgba(var(--tc-glow),.28); } body[data-concept="01"] .tc-prod.is-fit:hover { transform: translateY(-12px); } body[data-concept="01"] .tc-prod.is-fit .tc-float { background: radial-gradient(circle at 50% 40%, rgba(var(--tc-glow),.22), transparent 65%); } body[data-concept="01"] .tc-fitmark { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--teal); color: var(--ink); font-family: var(--mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; padding: .35em .55em; opacity: 0; transform: translateY(-6px); transition: opacity .25s var(--ease), transform .25s var(--ease); } body[data-concept="01"] .tc-prod.is-fit .tc-fitmark { opacity: 1; transform: none; } body[data-concept="01"] .tc-prod .badge-sale { position: absolute; top: 12px; right: 12px; z-index: 2; } @media (max-width: 767.98px) { body[data-concept="01"] .tc-prod .tc-float img, body[data-concept="01"] .tc-prod .tc-float::after { animation-duration: 9s; } } body[data-concept="01"] .tc-sinkfoot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 34px; } /* ---------- Regions: 30 ft, the tide chart ---------- */ body[data-concept="01"] .tc-tide-head { display: grid; gap: 18px; margin-bottom: 26px; } @media (min-width: 992px) { body[data-concept="01"] .tc-tide-head { grid-template-columns: 1.4fr 1fr; align-items: end; } } body[data-concept="01"] .tc-tide-cols { display: none; } body[data-concept="01"] .tc-tides { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(var(--tc-ln),.14); } body[data-concept="01"] .tc-tide { display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "i name" "i bar" "i ports"; gap: 6px 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(var(--tc-ln),.14); color: var(--bs-body-color); text-decoration: none; transition: background .2s var(--ease); } body[data-concept="01"] .tc-tide:hover { background: rgba(var(--tc-ln),.03); } body[data-concept="01"] .tc-tide-i { grid-area: i; font-family: var(--mono); font-size: 14px; color: var(--tc-acc); align-self: start; padding-top: 4px; } body[data-concept="01"] .tc-tide-name { grid-area: name; font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(22px, 2.4vw, 34px); line-height: 1; letter-spacing: .01em; } body[data-concept="01"] .tc-tide-bar { grid-area: bar; position: relative; height: 14px; width: var(--len); max-width: 100%; background: var(--tc-bar); border-radius: 2px; transition: width .45s var(--ease), background .2s var(--ease); } body[data-concept="01"] .tc-tide-bar::after { content: ""; position: absolute; right: -1px; top: -5px; width: 3px; height: 24px; background: var(--teal); } body[data-concept="01"] .tc-tide:hover .tc-tide-bar { width: calc(var(--len) + 9%); background: var(--tc-bar-hi); } body[data-concept="01"] .tc-tide-ports { grid-area: ports; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-tide-go { display: none; } @media (min-width: 768px) { body[data-concept="01"] .tc-tide-cols { display: grid; grid-template-columns: 34px 170px 1fr 190px 44px; gap: 18px; padding: 0 0 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-tide { grid-template-columns: 34px 170px 1fr 190px 44px; grid-template-areas: "i name bar ports go"; gap: 18px; padding: 16px 0; } body[data-concept="01"] .tc-tide-i { align-self: center; padding-top: 0; } body[data-concept="01"] .tc-tide-go { grid-area: go; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(var(--tc-ln),.25); color: var(--tc-fg); transition: background .2s var(--ease), color .2s var(--ease), transform .3s var(--ease); } body[data-concept="01"] .tc-tide-go svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-tide:hover .tc-tide-go { background: var(--teal); color: var(--ink); border-color: var(--teal); transform: translateX(4px); } } @media (min-width: 992px) { body[data-concept="01"] .tc-tide-cols, body[data-concept="01"] .tc-tide { grid-template-columns: 34px 260px 1fr 240px 44px; } } /* ---------- Story: 60 ft, the pull quote ---------- */ body[data-concept="01"] .tc-story-quote { margin: 0 0 clamp(28px, 4vw, 54px); } body[data-concept="01"] .tc-story-quote p { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(34px, 7.6vw, 108px); line-height: .95; letter-spacing: .005em; text-wrap: balance; margin: 0; color: var(--tc-quote); max-width: 16ch; } body[data-concept="01"] .tc-story-quote cite { display: block; margin-top: 18px; font-style: normal; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-fish-red { position: absolute; top: 12%; left: 0; width: clamp(260px, 42vw, 620px); opacity: var(--tc-fish-a); pointer-events: none; animation: tc-drift 42s linear infinite; z-index: 0; } @keyframes tc-drift { from { transform: translateX(-110%) translateY(0); } 50% { transform: translateX(50vw) translateY(40px); } to { transform: translateX(110vw) translateY(0); } } body[data-concept="01"] .tc-story-grid { display: grid; gap: 18px; } @media (min-width: 768px) { body[data-concept="01"] .tc-story-grid { grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; } } body[data-concept="01"] .tc-story-copy h2 { font-size: clamp(36px, 5vw, 72px); margin: 0 0 14px; } body[data-concept="01"] .tc-story-copy p { font-size: clamp(16px, 1.2vw, 19px); max-width: 52ch; } body[data-concept="01"] .tc-story-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body[data-concept="01"] .tc-story-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; aspect-ratio: 3 / 4; } body[data-concept="01"] .tc-story-photos img:first-child { transform: translateY(28px); } /* ---------- Journal: 80 ft, leaning cards ---------- */ body[data-concept="01"] .tc-journal { display: grid; gap: 18px; } @media (min-width: 768px) { body[data-concept="01"] .tc-journal { grid-template-columns: repeat(3, 1fr); gap: 24px; perspective: 1400px; transform-style: preserve-3d; } body[data-concept="01"] .tc-jcard:nth-child(1) { transform: rotateY(16deg) translateX(10px); } body[data-concept="01"] .tc-jcard:nth-child(2) { transform: translateZ(28px); } body[data-concept="01"] .tc-jcard:nth-child(3) { transform: rotateY(-16deg) translateX(-10px); } body[data-concept="01"] .tc-jcard:hover { transform: translateZ(40px); } } body[data-concept="01"] .tc-jcard { display: block; color: var(--bs-body-color); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease); overflow: hidden; } body[data-concept="01"] .tc-jcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 14px 14px 0 0; } body[data-concept="01"] .tc-jcard .card-body { padding: 18px; } body[data-concept="01"] .tc-jcard h3 { font-family: Barlow, "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: 700; font-size: 20px; letter-spacing: 0; line-height: 1.25; margin: 6px 0 0; } body[data-concept="01"] .tc-jcard .tc-read { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--tc-acc); font-weight: 600; font-size: 15px; } body[data-concept="01"] .tc-jcard .tc-read svg { width: 16px; height: 16px; } /* ---------- Community: 90 ft ---------- */ body[data-concept="01"] .tc-crew-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 22px; } body[data-concept="01"] .tc-crew-head h2 { font-size: clamp(32px, 4.4vw, 60px); margin: 0; } body[data-concept="01"] .tc-crew { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 768px) { body[data-concept="01"] .tc-crew { grid-template-columns: repeat(6, 1fr); gap: 12px; } } body[data-concept="01"] .tc-crew img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; display: block; } body[data-concept="01"] .tc-crew figure { margin: 0; } body[data-concept="01"] .tc-crew figure:nth-child(even) { transform: translateY(16px); } /* ---------- Seabed: 100 ft ---------- */ body[data-concept="01"] .tc-s100 .tc-wrap { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; } body[data-concept="01"] .tc-s100 h2 { font-size: clamp(48px, 11vw, 170px); margin: 0 0 20px; max-width: 12ch; } body[data-concept="01"] .tc-seabed-line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(var(--tc-ln),.25) 0 14px, transparent 14px 28px); } body[data-concept="01"] .tc-fish-shrimp { position: absolute; left: -4%; bottom: 6%; width: clamp(200px, 26vw, 420px); opacity: .22; pointer-events: none; animation: tc-hover 11s ease-in-out infinite; } body[data-concept="01"] .tc-fish-snapper { position: absolute; right: -2%; top: 8%; width: clamp(220px, 30vw, 480px); opacity: .18; pointer-events: none; animation: tc-hover 13s ease-in-out infinite reverse; } @keyframes tc-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } body[data-concept="01"] .tc-s100 .lede { color: var(--bs-secondary-color); max-width: 48ch; } /* ---------- Footer ---------- */ body[data-concept="01"] .tc-ftr .tc-wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: 28px; } body[data-concept="01"] .tc-ftr-grid { display: grid; gap: 28px; } @media (min-width: 768px) { body[data-concept="01"] .tc-ftr-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; } } body[data-concept="01"] .tc-ftr img { height: 22px; width: auto; display: block; } body[data-concept="01"] .tc-ftr h4 { font-family: var(--mono); font-weight: 500 !important; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc); margin: 0 0 10px; } body[data-concept="01"] .tc-ftr ul { list-style: none; margin: 0; padding: 0; } body[data-concept="01"] .tc-ftr ul a { color: var(--bs-body-color); text-decoration: none; display: inline-block; padding: 5px 0; } body[data-concept="01"] .tc-ftr ul a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-fine { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(var(--tc-ln),.12); display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-fine p { margin: 0; } body[data-concept="01"] .tc-fine a { color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-fine a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-fine ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; } /* ---------- Reduced motion: static placements ---------- */ @media (prefers-reduced-motion: reduce) { body[data-concept="01"] .tc-fish-red { animation: none; transform: translateX(45vw); } body[data-concept="01"] .tc-prod .tc-float::after, body[data-concept="01"] .tc-hero-surface { display: none; } body[data-concept="01"] .tc-prod .tc-float img, body[data-concept="01"] .tc-fish-shrimp, body[data-concept="01"] .tc-fish-snapper { animation: none; } } /* ===================================================================== 01 Tide Chart interiors (2026-10) Readings at depth: a depth band opens every page, grounds descend to the seabed, the gauge rides along. The header is the shared Poster nav (assets/nav.css); nothing here touches .rn-*. */ /* ---------- theme tokens. 01 is dark first; light is the same dive at noon: a white surface, sunlit teal shallows, then the deep teal seabed. Every colour on the page reads one of these. ---------- */ body[data-concept="01"] { --tc-s1: #158E9D; --tc-page: var(--ink); --tc-fg: var(--white); --tc-inv: var(--ink); --tc-acc: #3FCBDB; --tc-tint: #A7E2EA; --tc-tint2: #D3F0F4; --tc-quote: #23B6C7; --tc-err: #FF8F66; --tc-stroke: #FFFFFF; --tc-ln: 255,255,255; --tc-gl: 255,255,255; --tc-sc: 4,25,30; --tc-sh: 0,0,0; --tc-glow: 35,182,199; --tc-glow2: 63,203,219; --tc-line: rgba(255,255,255,.16); --tc-line2: rgba(255,255,255,.28); --tc-glass: rgba(255,255,255,.05); --tc-shaft-a: .075; --tc-band-a: #0A626D; --tc-band-b: #064049; --tc-band-c: #04191E; --tc-gwater: #04191E; --tc-g10: #04191E; --tc-g30a: #04191E; --tc-g30b: #161B21; --tc-g60: #161B21; --tc-g80a: #161B21; --tc-g80b: #0D1014; --tc-g90: #0D1014; --tc-g100a: #0D1014; --tc-g100b: #0D1014; --tc-gftr: #161B21; --tc-gpaper: #0D1014; --tc-bar: #EFEFEF; --tc-bar-hi: #FFFFFF; --tc-run-bg: #04191E; --tc-thumbcut: #064049; --tc-knob: #FFFFFF; --tc-toast-bg: #161B21; --tc-mbar-bg: #0D1014; --tc-mbar-bd: #232B33; --tc-mc-bg: #0D1014; --tc-mc-fg: #FFFFFF; --tc-404: rgba(167,226,234,.32); --tc-fish-a: .16; --tc-gauge-fg: #FFFFFF; --tc-gauge-rgb: 255,255,255; --tc-gauge-acc: #3FCBDB; --tc-cg1: rgba(255,255,255,.16); --tc-cg2: rgba(255,255,255,.06); --tc-cg-bd: rgba(255,255,255,.2); --tc-cg-sh: 0 6px 16px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.2); } html[data-theme="light"] body[data-concept="01"] { --tc-page: #FFFFFF; --tc-fg: #0D1014; --tc-inv: #FFFFFF; --tc-acc: #0A626D; --tc-tint: #0A626D; --tc-tint2: #333A40; --tc-quote: #0A626D; --tc-err: #B23D10; --tc-stroke: #064049; --tc-ln: 6,64,73; --tc-gl: 35,182,199; --tc-sc: 255,255,255; --tc-sh: 6,64,73; --tc-line: rgba(6,64,73,.18); --tc-line2: rgba(6,64,73,.5); --tc-glass: rgba(255,255,255,.62); --tc-shaft-a: .14; --tc-band-a: #FFFFFF; --tc-band-b: #FFFFFF; --tc-band-c: #D3F0F4; --tc-gwater: #FFFFFF; --tc-g10: #D3F0F4; --tc-g30a: #D3F0F4; --tc-g30b: #A7E2EA; --tc-g60: #A7E2EA; --tc-g80a: #A7E2EA; --tc-g80b: #3FCBDB; --tc-g90: #0A626D; --tc-g100a: #0A626D; --tc-g100b: #064049; --tc-gftr: #04191E; --tc-gpaper: #FFFFFF; --tc-bar: #0A626D; --tc-bar-hi: #064049; --tc-run-bg: #FFFFFF; --tc-thumbcut: #D3F0F4; --tc-knob: #0A626D; --tc-toast-bg: #FFFFFF; --tc-mbar-bg: #FFFFFF; --tc-mbar-bd: rgba(6,64,73,.18); --tc-mc-bg: #FFFFFF; --tc-mc-fg: #0D1014; --tc-404: rgba(10,98,109,.22); --tc-fish-a: .5; --tc-gauge-fg: #064049; --tc-gauge-rgb: 6,64,73; --tc-gauge-acc: #0A626D; --tc-cg1: rgba(255,255,255,.94); --tc-cg2: rgba(255,255,255,.8); --tc-cg-bd: rgba(6,64,73,.16); --tc-cg-sh: 0 12px 30px rgba(6,64,73,.1), inset 0 1px 0 rgba(255,255,255,.9); --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230D1014' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } /* light grounds: the shared re-map turns every dark section light; deepen the secondary text so it clears 4.5:1 on the sunlit teal shallows, and darken the accents again in the deepest shallows (s80) */ html[data-theme="light"] body[data-concept="01"] [data-bs-theme="dark"] { --bs-secondary-color: #333A40; --bs-secondary-color-rgb: 51, 58, 64; } html[data-theme="light"] body[data-concept="01"] .tc-s80[data-bs-theme] { --tc-acc: #064049; --tc-tint: #064049; --bs-link-color: #064049; --bs-primary-text-emphasis: #064049; } html[data-theme="light"] body[data-concept="01"] .form-select { --bs-form-select-bg-img: inherit; } /* keep-ground: photo heroes (dark scrim) and the deep teal at the bottom of the descent stay dark in light mode */ html[data-theme="light"] body[data-concept="01"] .keep-ground[data-bs-theme], html[data-theme="light"] body[data-concept="01"] .keep-ground [data-bs-theme] { color-scheme: dark; --bs-body-color: #FFFFFF; --bs-body-color-rgb: 255, 255, 255; --bs-emphasis-color: #FFFFFF; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: #D3F0F4; --bs-secondary-color-rgb: 211, 240, 244; --bs-tertiary-color: rgba(255, 255, 255, .6); --bs-primary-text-emphasis: #A7E2EA; --bs-link-color: #A7E2EA; --bs-link-color-rgb: 167, 226, 234; --bs-link-hover-color: #FFFFFF; --bs-link-hover-color-rgb: 255, 255, 255; --bs-border-color: #232B33; --bs-border-color-translucent: rgba(255, 255, 255, .15); --bs-code-color: #A7E2EA; --bs-form-invalid-color: #FF8F66; --bs-form-invalid-border-color: #FF8F66; --tc-fg: #FFFFFF; --tc-inv: #0D1014; --tc-acc: #A7E2EA; --tc-tint: #A7E2EA; --tc-tint2: #D3F0F4; --tc-quote: #A7E2EA; --tc-err: #FF8F66; --tc-stroke: #FFFFFF; --tc-ln: 255,255,255; --tc-gl: 255,255,255; --tc-sc: 4,25,30; --tc-sh: 0,0,0; --tc-line: rgba(255,255,255,.18); --tc-line2: rgba(255,255,255,.32); --tc-glass: rgba(255,255,255,.06); --tc-shaft-a: .075; --tc-bar: #EFEFEF; --tc-bar-hi: #FFFFFF; --tc-run-bg: #064049; --tc-thumbcut: #064049; --tc-knob: #FFFFFF; --tc-fish-a: .22; --tc-404: rgba(167,226,234,.32); --tc-band-a: #0A626D; --tc-band-b: #064049; --tc-band-c: #04191E; --tc-cg1: rgba(255,255,255,.16); --tc-cg2: rgba(255,255,255,.06); --tc-cg-bd: rgba(255,255,255,.22); --tc-cg-sh: 0 6px 16px rgba(0,0,0,.15), inset 0 1px 1px rgba(255,255,255,.2); } html[data-theme="light"] body[data-concept="01"] .tc-paper { background: linear-gradient(180deg, var(--tc-g10) 0%, var(--tc-gpaper) 320px); } /* glass cards read the tokens (frosted white in light, smoked glass in dark) */ body[data-concept="01"] .card-glass { background-image: linear-gradient(var(--tc-cg1), var(--tc-cg2)); --bs-card-border-color: var(--tc-cg-bd); box-shadow: var(--tc-cg-sh); } /* the gauge rides over every ground; in light mode a white halo keeps it legible over the deep teal too */ html[data-theme="light"] body[data-concept="01"] .tc-gauge { text-shadow: 0 0 2px var(--white), 0 0 6px var(--white), 0 0 12px var(--white); } html[data-theme="light"] body[data-concept="01"] .tc-gauge-pin { box-shadow: 0 0 0 4px var(--white), 0 0 18px rgba(var(--tc-glow),.6); } /* mobile bar: ink in dark, white with an ink Cart button in light */ body[data-concept="01"] .tc-mbar { background: var(--tc-mbar-bg); border-top-color: var(--tc-mbar-bd); } html[data-theme="light"] body[data-concept="01"] .tc-mbar .btn-white { --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-color: var(--white); --bs-btn-hover-bg: var(--ink-3); --bs-btn-hover-border-color: var(--ink-3); --bs-btn-hover-color: var(--white); --bs-btn-active-bg: var(--ink-2); --bs-btn-active-border-color: var(--ink-2); --bs-btn-active-color: var(--white); } html[data-theme="light"] body[data-concept="01"] .tc-toast { box-shadow: 0 18px 40px rgba(6,64,73,.18); } /* light: controls need a 3:1 edge on the pale grounds; selected teal fills get a teal-ink edge */ html[data-theme="light"] body[data-concept="01"] .tc-chip { border-color: rgba(var(--tc-ln),.6); } html[data-theme="light"] body[data-concept="01"] .tc-chip[aria-current], html[data-theme="light"] body[data-concept="01"] .tc-chip[aria-pressed="true"], html[data-theme="light"] body[data-concept="01"] .tc-size:has(input:checked), html[data-theme="light"] body[data-concept="01"] .tc-help[aria-pressed="true"], html[data-theme="light"] body[data-concept="01"] .tc-switch input:checked + .tc-switch-ui { border-color: var(--tc-acc); } html[data-theme="light"] body[data-concept="01"] .keep-ground .tc-chip[aria-current], html[data-theme="light"] body[data-concept="01"] .keep-ground .tc-chip[aria-pressed="true"] { border-color: var(--teal); } /* the fixed gauge sits in the left gutter; on interiors it only has room from 1440 up. Below that the thin progress line under the header carries the depth, and the content takes the gutter back. */ @media (min-width: 992px) and (max-width: 1439.98px) { body[data-concept="01"]:not(.tc-home) .tc-gauge { display: none; } body[data-concept="01"]:not(.tc-home) .tc-prog { display: block; } body[data-concept="01"]:not(.tc-home) .tc-wrap { width: min(1240px, 100% - 64px); } } body[data-concept="01"] .badge { font-size: 14px; } body[data-concept="01"] .tc-wrap > :last-child { margin-bottom: 0; } /* progress line rides under the sticky header on phones; gauge zone label on desktop */ body[data-concept="01"] .tc-prog { position: sticky; top: var(--rn-h); left: 0; z-index: 290; margin-bottom: -3px; } @media (min-width: 992px) { body[data-concept="01"] .tc-gauge { top: max(24vh, 200px); height: 54vh; } body[data-concept="01"] .tc-gauge-zone { position: absolute; left: 0; top: -68px; white-space: nowrap; color: var(--tc-tint); letter-spacing: .14em; text-transform: uppercase; } body[data-concept="01"] .tc-gauge.is-reading .tc-gauge-read::before { content: "READ "; } body[data-concept="01"] .tc-gauge.is-reading .tc-gauge-read::after { counter-reset: tcdepth var(--depth); content: counter(tcdepth) "%"; } } /* ---------- the depth band ---------- */ body[data-concept="01"] .tc-band, body[data-concept="01"] .tc-pdp { background: linear-gradient(180deg, var(--tc-band-a) 0%, var(--tc-band-b) 44%, var(--tc-band-c) 100%); isolation: isolate; } body[data-concept="01"] .tc-band .tc-band-in { padding-top: clamp(22px, 3vw, 44px); padding-bottom: clamp(36px, 5vw, 76px); position: relative; z-index: 2; } body[data-concept="01"] .tc-band-photo { position: absolute; inset: 0; z-index: 0; } body[data-concept="01"] .tc-band-photo img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .62; mix-blend-mode: luminosity; } body[data-concept="01"] .tc-band.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--tc-sc),.55) 0%, rgba(var(--tc-sc),.74) 55%, rgba(var(--tc-sc),.96) 100%); } body[data-concept="01"] .tc-band-water { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } body[data-concept="01"] .tc-band-water i { position: absolute; top: -20%; bottom: -20%; left: 8%; width: 16%; background: linear-gradient(90deg, rgba(var(--tc-gl),0), rgba(var(--tc-gl),var(--tc-shaft-a)), rgba(var(--tc-gl),0)); transform: skewX(-14deg); animation: tc-shaft 9s ease-in-out infinite alternate; } body[data-concept="01"] .tc-band-water i:nth-child(2) { left: 44%; width: 22%; animation-duration: 13s; animation-delay: -4s; } body[data-concept="01"] .tc-band-water i:nth-child(3) { left: 78%; width: 9%; animation-duration: 11s; animation-delay: -7s; } @keyframes tc-shaft { from { transform: skewX(-14deg) translateX(-36px); opacity: .45; } to { transform: skewX(-7deg) translateX(44px); opacity: 1; } } body[data-concept="01"] .tc-band-surface { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; background: linear-gradient(90deg, rgba(var(--tc-gl),0), rgba(var(--tc-gl),.85), rgba(var(--tc-gl),0)); background-size: 200% 100%; animation: tc-glint 7s linear infinite; } body[data-concept="01"] .tc-readout { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 18px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-tint); padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--tc-line2); } body[data-concept="01"] .tc-readout-l { display: inline-flex; align-items: center; gap: 10px; } body[data-concept="01"] .tc-readout-l::before { content: ""; flex: 0 0 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(var(--tc-glow),.25); animation: tc-ping 2.4s ease-out infinite; } @keyframes tc-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--tc-glow),.55); } 100% { box-shadow: 0 0 0 12px rgba(var(--tc-glow),0); } } body[data-concept="01"] .tc-readout-r { color: var(--tc-fg); } body[data-concept="01"] .tc-readout-r::before { content: "DEPTH "; color: var(--tc-tint); } body[data-concept="01"] .tc-readout-r::after { counter-reset: tcband var(--depth); content: counter(tcband) " FT"; } body[data-concept="01"].tc-reading .tc-readout-r::before { content: "READ "; } body[data-concept="01"].tc-reading .tc-readout-r::after { content: counter(tcband) "%"; } @media (max-width: 575.98px) { body[data-concept="01"] .tc-readout-r { display: none; } } body[data-concept="01"] .tc-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: -6px 0 10px; padding: 0; font-size: 15px; color: var(--tc-tint2); } body[data-concept="01"] .tc-crumbs li { display: inline-flex; align-items: center; } body[data-concept="01"] .tc-crumbs li + li::before { content: "/"; margin: 0 10px; opacity: .55; } body[data-concept="01"] .tc-crumbs a { color: var(--tc-fg); text-decoration: underline; text-decoration-color: rgba(var(--tc-ln),.4); text-underline-offset: 4px; display: inline-block; padding: 10px 0; } body[data-concept="01"] .tc-crumbs a:hover { color: var(--tc-acc); text-decoration-color: currentColor; } body[data-concept="01"] .tc-crumbs [aria-current] { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } body[data-concept="01"] .tc-band-eyebrow { color: var(--tc-tint); margin: 6px 0 10px; } body[data-concept="01"] .tc-band h1 { font-size: clamp(54px, 10.4vw, 156px); margin: 0 0 18px; max-width: 13ch; color: transparent; } body[data-concept="01"] .tc-band h1.is-mid { font-size: clamp(44px, 7.4vw, 112px); max-width: 16ch; } body[data-concept="01"] .tc-band h1.is-long { font-size: clamp(36px, 5.2vw, 78px); max-width: 21ch; line-height: .95; } body[data-concept="01"] .tc-fillin { animation: tc-flood 1.6s .25s var(--ease) both; } @keyframes tc-flood { from { color: transparent; } to { color: var(--tc-fg); } } body[data-concept="01"] .tc-band-lede { color: var(--tc-tint2); max-width: 56ch; margin: 0 0 6px; } body[data-concept="01"] .tc-band-lede a { color: var(--tc-fg); text-underline-offset: 4px; } body[data-concept="01"] .tc-band-count { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-fg); } body[data-concept="01"] .tc-band-count span { display: inline-flex; align-items: center; gap: 8px; } body[data-concept="01"] .tc-band-count span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } body[data-concept="01"] .tc-collnav { margin-top: 18px; } body[data-concept="01"] .tc-band-ctas { margin: 22px 0 0; } body[data-concept="01"] .tc-band-short .tc-band-in { padding-bottom: clamp(30px, 4vw, 56px); } body[data-concept="01"] .tc-band-quiet h1 { font-size: clamp(44px, 6vw, 88px); } /* chips (collection tabs, topic filters, jump links, popular searches) */ body[data-concept="01"] .tc-chips.is-wrap { flex-wrap: wrap; overflow: visible; } body[data-concept="01"] .tc-chip-n { font-size: 14px; opacity: .7; margin-left: 2px; } body[data-concept="01"] .tc-chip[aria-current="page"], body[data-concept="01"] .tc-chip[aria-pressed="true"] { background: var(--teal); color: var(--ink); border-color: var(--teal); } body[data-concept="01"] .tc-chip[aria-current="page"] .tc-chip-n, body[data-concept="01"] .tc-chip[aria-pressed="true"] .tc-chip-n { opacity: 1; } /* ---------- shared section furniture ---------- */ body[data-concept="01"] .tc-h2s { font-size: clamp(40px, 6.6vw, 100px); margin: 0 0 .3em; max-width: 15ch; } body[data-concept="01"] .tc-h2s.is-big { font-size: clamp(42px, 6vw, 92px); } body[data-concept="01"] .tc-h2s.is-md { font-size: clamp(34px, 4.4vw, 64px); } body[data-concept="01"] .tc-h2p { font-size: clamp(30px, 3.4vw, 50px); margin: 0 0 18px; color: var(--bs-body-color); } body[data-concept="01"] .tc-split-head { display: grid; gap: 12px; margin-bottom: 26px; } body[data-concept="01"] .tc-split-head h2 { margin-bottom: 0; } body[data-concept="01"] .tc-split-head .lede { margin: 0; max-width: 52ch; } @media (min-width: 992px) { body[data-concept="01"] .tc-split-head { grid-template-columns: 1.3fr 1fr; align-items: end; gap: 32px; } } body[data-concept="01"] .tc-note { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); margin: 0; } body[data-concept="01"] .tc-reading-lbl { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc); margin: 0 0 10px; } body[data-concept="01"] .tc-reading-lbl::before { content: ""; width: 22px; height: 1px; background: currentColor; } body[data-concept="01"] .tc-reading-lbl.is-2 { margin-top: 22px; } body[data-concept="01"] .tc-tools-read { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-tools-read b { color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-seabed .tc-wrap { min-height: 54vh; } body[data-concept="01"] .tc-seabed h2 { font-size: clamp(46px, 9vw, 140px); } /* prose */ body[data-concept="01"] .tc-prose { font-size: 17px; line-height: 1.65; max-width: 70ch; color: var(--bs-body-color); } body[data-concept="01"] .tc-prose.is-lg { font-size: clamp(17px, 1.25vw, 19px); } body[data-concept="01"] .tc-prose > :first-child { margin-top: 0; } body[data-concept="01"] .tc-prose p { margin: 0 0 1.05em; } body[data-concept="01"] .tc-prose h2 { font-size: clamp(30px, 3.2vw, 46px); margin: 1.5em 0 .5em; color: var(--tc-fg); } body[data-concept="01"] .tc-prose h3 { font-size: clamp(22px, 2vw, 28px); margin: 1.4em 0 .45em; color: var(--tc-tint); } body[data-concept="01"] .tc-prose h4 { font-size: 18px; margin: 1.2em 0 .4em; } body[data-concept="01"] .tc-prose a { color: var(--tc-acc); text-decoration: underline; text-underline-offset: 3px; } body[data-concept="01"] .tc-prose a:hover { color: var(--tc-fg); } body[data-concept="01"] .tc-prose strong { color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-prose ul, body[data-concept="01"] .tc-prose ol { padding-left: 1.3em; margin: 0 0 1.1em; } body[data-concept="01"] .tc-prose li { margin-bottom: .45em; } body[data-concept="01"] .tc-prose li::marker { color: var(--tc-acc); font-family: var(--mono); } body[data-concept="01"] .tc-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--teal); font-size: 1.2em; font-style: italic; color: var(--tc-tint2); } body[data-concept="01"] .tc-prose figure { margin: 1.6em 0; } body[data-concept="01"] .tc-prose img { width: 100%; height: auto; border-radius: 14px; display: block; } body[data-concept="01"] .tc-prose figcaption { font-size: 14px; color: var(--bs-secondary-color); margin-top: 8px; } body[data-concept="01"] .tc-tablewrap { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--tc-line); border-radius: 12px; background: rgba(var(--tc-sc),.5); -webkit-overflow-scrolling: touch; } body[data-concept="01"] .tc-tablewrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 16px; } body[data-concept="01"] .tc-tablewrap caption { caption-side: top; text-align: left; padding: 14px 16px 6px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-tablewrap th, body[data-concept="01"] .tc-tablewrap td { padding: 12px 16px; border-bottom: 1px solid var(--tc-line); text-align: left; } body[data-concept="01"] .tc-tablewrap th { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-tablewrap td:first-child { font-weight: 700; color: var(--tc-fg); } body[data-concept="01"] .tc-tablewrap tr:last-child td { border-bottom: 0; } /* accordions */ body[data-concept="01"] .tc-accs { border-top: 1px solid var(--tc-line); } body[data-concept="01"] .tc-acc { border-bottom: 1px solid var(--tc-line); } body[data-concept="01"] .tc-acc summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 58px; padding: 12px 0; cursor: pointer; font-weight: 600; font-size: 18px; line-height: 1.3; } body[data-concept="01"] .tc-acc summary::-webkit-details-marker { display: none; } body[data-concept="01"] .tc-acc summary:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-acc-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--tc-acc); transition: transform .3s var(--ease); } body[data-concept="01"] .tc-acc[open] .tc-acc-ic { transform: rotate(45deg); } body[data-concept="01"] .tc-acc-body { padding: 0 0 18px; font-size: 16px; } body[data-concept="01"] .tc-fgroup { margin-bottom: clamp(36px, 4vw, 56px); scroll-margin-top: calc(var(--rn-h) + 20px); max-width: 860px; } body[data-concept="01"] .tc-fgroup-n { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; color: var(--tc-acc); margin-right: 14px; vertical-align: middle; } body[data-concept="01"] .tc-faq-grid { display: grid; gap: 22px; } @media (min-width: 992px) { body[data-concept="01"] .tc-faq-grid { grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; } } /* trust readings */ body[data-concept="01"] .tc-trustgrid { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--tc-line); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } body[data-concept="01"] .tc-trustgrid li { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--tc-tint2); line-height: 1.3; } body[data-concept="01"] .tc-trustgrid-ic { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--tc-line2); color: var(--tc-acc); } body[data-concept="01"] .tc-trustgrid-ic svg { width: 16px; height: 16px; } /* ---------- the sounding chart (product grid) ---------- */ body[data-concept="01"] .tc-chart { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); position: relative; isolation: isolate; } @media (min-width: 768px) { body[data-concept="01"] .tc-chart { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } } body[data-concept="01"] .tc-chart.is-sounding::before { content: ""; position: absolute; inset: -48px -40px; z-index: -1; pointer-events: none; background: repeating-radial-gradient(ellipse 58% 42% at 26% 38%, rgba(var(--tc-glow),0) 0 40px, rgba(var(--tc-glow),.13) 40px 41px), repeating-radial-gradient(ellipse 46% 60% at 86% 82%, rgba(var(--tc-glow),0) 0 52px, rgba(var(--tc-glow),.09) 52px 53px), linear-gradient(90deg, rgba(var(--tc-ln),.05) 1px, transparent 1px) 0 0 / 120px 120px, linear-gradient(180deg, rgba(var(--tc-ln),.05) 1px, transparent 1px) 0 0 / 120px 120px; } body[data-concept="01"] .tc-pc { position: relative; display: flex; flex-direction: column; color: var(--bs-body-color); text-decoration: none; overflow: hidden; --bs-card-border-radius: 14px; } body[data-concept="01"] .tc-pc.is-link { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } body[data-concept="01"] .tc-pc.is-link:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--teal), 0 24px 48px rgba(var(--tc-glow),.22); } body[data-concept="01"] .tc-pc-media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: radial-gradient(circle at 50% 44%, rgba(var(--tc-glow),.24), rgba(var(--tc-glow),0) 64%); } body[data-concept="01"] .tc-pc-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(var(--tc-gl),0) 38%, rgba(var(--tc-gl),.14) 50%, rgba(var(--tc-gl),0) 62%); background-size: 260% 100%; animation: tc-caustic 9s linear infinite; animation-delay: var(--delay, 0s); mix-blend-mode: screen; } body[data-concept="01"] .tc-pc-float { position: absolute; inset: 0; display: grid; place-items: center; } body[data-concept="01"] .tc-pc-cut { width: 74%; height: 74%; object-fit: contain; animation: tc-bob 6s ease-in-out infinite; animation-delay: var(--delay, 0s); filter: drop-shadow(0 22px 26px rgba(var(--tc-sh),.45)); } body[data-concept="01"] .tc-pc-alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); z-index: 1; } @media (hover: hover) { body[data-concept="01"] .tc-pc.has-alt:hover .tc-pc-alt { opacity: 1; } } body[data-concept="01"] .tc-pc-badges { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; pointer-events: none; } body[data-concept="01"] .tc-sold { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: .3em .55em; border-radius: 4px; background: rgba(var(--tc-sc),.86); color: var(--tc-fg); border: 1px solid var(--tc-line2); margin-left: auto; } body[data-concept="01"] .tc-pc-body { display: flex; flex-direction: column; flex: 1; padding: 12px 12px 14px; } body[data-concept="01"] .tc-pc-meta { margin: 0 0 4px; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-pc-t { font-family: Barlow, "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: 700 !important; font-size: 16px; letter-spacing: 0; line-height: 1.25; margin: 0 0 8px; } body[data-concept="01"] .tc-pc-t a { color: inherit; text-decoration: none; } body[data-concept="01"] .tc-pc-t a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-pc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: auto; } body[data-concept="01"] .tc-pc-row .tc-stock { font-size: 14px; letter-spacing: .04em; } body[data-concept="01"] .tc-pc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 44px; font-weight: 700; color: var(--tc-acc); font-size: 15px; } body[data-concept="01"] .tc-pc-go svg { width: 16px; height: 16px; transition: transform .3s var(--ease); } body[data-concept="01"] .tc-pc.is-link:hover .tc-pc-go svg { transform: translateX(4px); } body[data-concept="01"] .tc-qadd { width: 100%; margin-top: 12px; min-height: 44px; padding: .7rem .4rem .6rem; font-size: 14px; letter-spacing: .04em; gap: 6px; white-space: nowrap; } body[data-concept="01"] .tc-qadd.is-added { --bs-btn-bg: var(--teal-t1); --bs-btn-border-color: var(--teal-t1); } @media (min-width: 768px) { body[data-concept="01"] .tc-pc-body { padding: 16px 18px 18px; } body[data-concept="01"] .tc-pc-t { font-size: 18px; } } @media (max-width: 767.98px) { body[data-concept="01"] .tc-pc-cut, body[data-concept="01"] .tc-pc-media::after { animation-duration: 9s; } } body[data-concept="01"] .tc-dot-out { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: .45em; vertical-align: middle; } body[data-concept="01"] .tc-stock.is-out { color: var(--tc-fg); } body[data-concept="01"] .tc-empty { padding: 28px; border: 1px dashed var(--tc-line2); border-radius: 14px; margin-top: 18px; } body[data-concept="01"] .tc-empty-h { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 28px; margin: 0 0 6px; } /* collection toolbar: sticky under the shared header */ body[data-concept="01"] .tc-tools { position: sticky; top: var(--rn-h); z-index: 20; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 18px; padding: 10px 0; margin: -10px 0 22px; background: rgba(var(--tc-sc),.9); box-shadow: 0 0 0 100vmax rgba(var(--tc-sc),.9); clip-path: inset(0 -100vmax); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--tc-line); } body[data-concept="01"] .tc-tools-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } body[data-concept="01"] .tc-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 15px; } body[data-concept="01"] .tc-switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; } body[data-concept="01"] .tc-switch-ui { position: relative; width: 44px; height: 26px; border-radius: 13px; background: rgba(var(--tc-ln),.14); border: 1px solid var(--tc-line2); transition: background .2s var(--ease); } body[data-concept="01"] .tc-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tc-knob); transition: transform .25s var(--ease); } body[data-concept="01"] .tc-switch input:checked + .tc-switch-ui { background: var(--teal); border-color: var(--teal); } body[data-concept="01"] .tc-switch input:checked + .tc-switch-ui::after { transform: translateX(18px); background: var(--ink); } body[data-concept="01"] .tc-switch input:focus-visible + .tc-switch-ui { outline: 3px solid var(--teal); outline-offset: 3px; } body[data-concept="01"] .tc-sortlbl { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-select { width: auto; min-height: 44px; font-size: 16px; background-color: rgba(var(--tc-ln),.06); border-color: var(--tc-line2); color: var(--tc-fg); } body[data-concept="01"] .tc-select option { color: var(--ink); background: var(--white); } body[data-concept="01"] .tc-notes { max-width: 70ch; } body[data-concept="01"] .tc-notes h2 { margin-top: 0; } /* collections index: soundings */ body[data-concept="01"] .tc-crow-cols { display: none; } body[data-concept="01"] .tc-crows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tc-line); } body[data-concept="01"] .tc-crow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; grid-template-areas: "img name go" "img n go" "img bar go" "x x x"; gap: 4px 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tc-line); color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-crow-i { display: none; grid-area: i; font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-crow-img { grid-area: img; width: 72px; height: 72px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, rgba(var(--tc-glow),.3), rgba(var(--tc-glow),0) 70%); border: 1px solid var(--tc-line); } body[data-concept="01"] .tc-crow-img img { width: 80%; height: 80%; object-fit: contain; } body[data-concept="01"] .tc-crow-name { grid-area: name; font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(24px, 2.6vw, 36px); line-height: 1; } body[data-concept="01"] .tc-crow-bar { grid-area: bar; height: 10px; width: var(--len); max-width: 100%; background: var(--tc-bar); border-radius: 2px; position: relative; transition: width .45s var(--ease), background .2s var(--ease); } body[data-concept="01"] .tc-crow-bar::after { content: ""; position: absolute; right: -1px; top: -5px; width: 3px; height: 20px; background: var(--teal); } body[data-concept="01"] .tc-crow-n { grid-area: n; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-crow-x { grid-area: x; font-size: 15px; color: var(--bs-secondary-color); margin-top: 6px; } body[data-concept="01"] .tc-crow .tc-tide-go { grid-area: go; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--tc-line2); transition: background .2s var(--ease), color .2s var(--ease), transform .3s var(--ease); } body[data-concept="01"] .tc-crow .tc-tide-go svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-crow:hover .tc-crow-bar { width: calc(var(--len) + 8%); background: var(--tc-bar-hi); } body[data-concept="01"] .tc-crow:hover .tc-tide-go { background: var(--teal); color: var(--ink); border-color: var(--teal); transform: translateX(4px); } @media (min-width: 768px) { body[data-concept="01"] .tc-crow-cols { display: grid; grid-template-columns: 34px 88px minmax(0, 1.1fr) minmax(0, 1fr) 120px 44px; gap: 18px; padding-bottom: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-crow { grid-template-columns: 34px 88px minmax(0, 1.1fr) minmax(0, 1fr) 120px 44px; grid-template-areas: "i img name bar n go" "i img x x x go"; gap: 4px 18px; } body[data-concept="01"] .tc-crow-i { display: block; } body[data-concept="01"] .tc-crow-img { width: 88px; height: 88px; } } /* ---------- product page ---------- */ body[data-concept="01"] .tc-pdp-in { position: relative; z-index: 2; padding-top: 16px; padding-bottom: clamp(30px, 4vw, 64px); } body[data-concept="01"] .tc-pdp .tc-readout { margin-bottom: 4px; } body[data-concept="01"] .tc-pdp .tc-crumbs ol { margin: 0 0 8px; } body[data-concept="01"] .tc-pdp-grid { display: grid; gap: 14px; } @media (min-width: 992px) { body[data-concept="01"] .tc-pdp-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; } body[data-concept="01"] .tc-spec { position: sticky; top: calc(var(--rn-h) + 16px); } } body[data-concept="01"] .tc-stage { position: relative; height: clamp(250px, 72vw, 330px); border-radius: 18px; overflow: hidden; border: 1px solid var(--tc-line); background: radial-gradient(circle at 50% 46%, rgba(var(--tc-glow),.26), rgba(var(--tc-glow),0) 62%), linear-gradient(180deg, rgba(var(--tc-gl),.05), rgba(var(--tc-gl),0)); } @media (min-width: 992px) { body[data-concept="01"] .tc-stage { height: auto; aspect-ratio: 1 / 1; } } body[data-concept="01"] .tc-slide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; } body[data-concept="01"] .tc-slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; } body[data-concept="01"] .tc-slide.is-cut::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(112deg, rgba(var(--tc-gl),0) 36%, rgba(var(--tc-gl),.16) 50%, rgba(var(--tc-gl),0) 64%); background-size: 260% 100%; animation: tc-caustic 8s linear infinite; mix-blend-mode: screen; } body[data-concept="01"] .tc-stage-cut { position: relative; z-index: 1; width: 72%; height: 72%; object-fit: contain; animation: tc-bob 6s ease-in-out infinite; filter: drop-shadow(0 34px 40px rgba(var(--tc-sh),.5)); } body[data-concept="01"] .tc-stage-glow { position: absolute; width: 62%; aspect-ratio: 1 / 1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--tc-glow2),.34), rgba(var(--tc-glow2),0) 70%); animation: tc-breathe 6s ease-in-out infinite; } @keyframes tc-breathe { 0%, 100% { transform: scale(.92); opacity: .7; } 50% { transform: scale(1.06); opacity: 1; } } body[data-concept="01"] .tc-slide.is-photo { padding: 14px; } body[data-concept="01"] .tc-slide.is-photo img { width: 100%; height: 100%; object-fit: contain; background: var(--white); border: 1px solid var(--line); border-radius: 12px; } body[data-concept="01"] .tc-stage-read { position: absolute; top: 12px; left: 14px; z-index: 3; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; color: var(--tc-tint); background: rgba(var(--tc-sc),.7); padding: 4px 8px; border-radius: 6px; } body[data-concept="01"] .tc-stage-btn { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin-top: -22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--tc-line2); background: rgba(var(--tc-sc),.72); color: var(--tc-fg); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease); } body[data-concept="01"] .tc-stage-btn svg { width: 20px; height: 20px; } body[data-concept="01"] .tc-stage-btn:hover { background: var(--teal); color: var(--ink); border-color: var(--teal); } body[data-concept="01"] .tc-stage-btn.is-prev { left: 10px; } body[data-concept="01"] .tc-stage-btn.is-next { right: 10px; } .no-js body[data-concept="01"] .tc-stage-btn, .no-js body[data-concept="01"] .tc-thumbs { display: none; } body[data-concept="01"] .tc-thumbs { display: flex; gap: 8px; list-style: none; margin: 10px 0 0; padding: 2px; overflow-x: auto; scrollbar-width: none; } body[data-concept="01"] .tc-thumbs::-webkit-scrollbar { display: none; } body[data-concept="01"] .tc-thumb { display: block; width: 58px; height: 58px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--tc-line2); background: var(--white); cursor: pointer; transition: border-color .2s var(--ease), transform .2s var(--ease); } body[data-concept="01"] .tc-thumb.is-cut { background: var(--tc-thumbcut); } body[data-concept="01"] .tc-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } body[data-concept="01"] .tc-thumb:hover { border-color: var(--tc-acc); } body[data-concept="01"] .tc-thumb[aria-current="true"] { border: 2px solid var(--teal); box-shadow: 0 0 0 3px rgba(var(--tc-glow),.3); } @media (min-width: 992px) { body[data-concept="01"] .tc-thumb { width: 72px; height: 72px; } } body[data-concept="01"] .tc-spec { padding: 18px; --bs-card-border-radius: 18px; } @media (min-width: 992px) { body[data-concept="01"] .tc-spec { padding: 26px 28px; } } body[data-concept="01"] .tc-spec-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 6px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-spec-meta span + span::before { content: "/"; margin: 0 10px; opacity: .55; } body[data-concept="01"] .tc-spec-h1 { font-size: clamp(32px, 3.4vw, 52px); margin: 0 0 12px; color: var(--tc-fg); } body[data-concept="01"] .tc-spec-pr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } body[data-concept="01"] .tc-spec-price { font-size: 26px; font-weight: 700; color: var(--tc-fg); } body[data-concept="01"] .tc-spec-price del { font-size: 18px; font-weight: 400; } body[data-concept="01"] .tc-spec-stock { margin: 10px 0 14px; } body[data-concept="01"] .tc-stock.is-lg { font-size: 15px; color: var(--tc-fg); } body[data-concept="01"] .tc-lbl { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-tint); margin-bottom: 8px; padding: 0; float: none; width: auto; } body[data-concept="01"] .tc-size-now { color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-sizes { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; } body[data-concept="01"] .tc-size-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } body[data-concept="01"] .tc-size { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; padding: 6px; border-radius: 10px; border: 1px solid var(--tc-line2); background: var(--tc-glass); cursor: pointer; text-align: center; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } body[data-concept="01"] .tc-size input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } body[data-concept="01"] .tc-size-t { font-weight: 700; font-size: 17px; } body[data-concept="01"] .tc-size-m { font-family: var(--mono); font-size: 14px; letter-spacing: .02em; color: var(--tc-tint); } body[data-concept="01"] .tc-size:not(.is-out):hover { border-color: var(--tc-acc); } body[data-concept="01"] .tc-size.is-sel, body[data-concept="01"] .tc-size:has(input:checked) { background: var(--teal); border-color: var(--teal); color: var(--ink); } body[data-concept="01"] .tc-size.is-sel .tc-size-m, body[data-concept="01"] .tc-size:has(input:checked) .tc-size-m { color: var(--ink); } body[data-concept="01"] .tc-size:has(input:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; } body[data-concept="01"] .tc-size.is-out { cursor: not-allowed; border-style: dashed; background: transparent; } body[data-concept="01"] .tc-size.is-out .tc-size-t { text-decoration: line-through; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-size.is-out input { cursor: not-allowed; } body[data-concept="01"] .tc-size-note { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; font-size: 15px; color: var(--tc-tint2); } body[data-concept="01"] .tc-size-note svg { width: 18px; height: 18px; color: var(--tc-acc); flex-shrink: 0; } body[data-concept="01"] .tc-size-note a { color: var(--tc-fg); text-underline-offset: 3px; } body[data-concept="01"] .tc-size-note a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-buy-row { display: flex; gap: 10px; align-items: stretch; } body[data-concept="01"] .tc-buy-row .tc-add { flex: 1; min-height: 56px; } body[data-concept="01"] .tc-step { display: inline-flex; align-items: center; border: 1px solid var(--tc-line2); border-radius: 10px; height: 56px; background: var(--tc-glass); } body[data-concept="01"] .tc-step-b { width: 44px; height: 100%; display: grid; place-items: center; border: 0; background: transparent; color: var(--tc-fg); cursor: pointer; border-radius: 10px; } body[data-concept="01"] .tc-step-b svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-step-b:hover { color: var(--tc-acc); background: rgba(var(--tc-ln),.06); } body[data-concept="01"] .tc-step-in { width: 42px; height: 100%; border: 0; background: transparent; color: var(--tc-fg); text-align: center; font-family: var(--mono); font-size: 17px; -moz-appearance: textfield; appearance: textfield; } body[data-concept="01"] .tc-step-in::-webkit-inner-spin-button, body[data-concept="01"] .tc-step-in::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body[data-concept="01"] .tc-spec-ship { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; font-size: 15px; color: var(--tc-tint2); } body[data-concept="01"] .tc-spec-ship svg { width: 20px; height: 20px; color: var(--tc-acc); flex-shrink: 0; } body[data-concept="01"] .tc-soldbox { padding: 16px; border: 1px dashed var(--tc-line2); border-radius: 12px; } body[data-concept="01"] .tc-soldbox p { margin: 0 0 12px; font-size: 16px; color: var(--tc-tint2); } body[data-concept="01"] .tc-soldbox-h { font-family: var(--mono); font-size: 16px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-fg) !important; font-weight: 700; display: flex; align-items: center; } body[data-concept="01"] .tc-soldbox-ctas { display: flex; flex-wrap: wrap; gap: 10px; } body[data-concept="01"] .tc-pd-grid { display: grid; gap: 28px; } @media (min-width: 992px) { body[data-concept="01"] .tc-pd-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: start; } } body[data-concept="01"] .tc-pd-help { margin: 18px 0 0; font-size: 16px; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-pd-help a { color: var(--tc-acc); } /* mobile bar extras */ body[data-concept="01"] .tc-mcount { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; background: var(--tc-mc-bg); color: var(--tc-mc-fg); font-family: var(--mono); font-size: 14px; letter-spacing: 0; } body[data-concept="01"] .tc-mbar.is-buy { align-items: center; } body[data-concept="01"] .tc-mbar-price { display: flex; flex-direction: column; justify-content: center; flex: 0 0 auto; color: var(--tc-fg); font-family: var(--mono); font-size: 17px; line-height: 1.2; } body[data-concept="01"] .tc-mbar-price .price del { font-size: 14px; display: block; margin: 0; } body[data-concept="01"] .tc-mbar-k { font-size: 14px; color: var(--tc-tint); text-transform: uppercase; letter-spacing: .1em; } /* toast */ body[data-concept="01"] .tc-toast { position: fixed; right: 16px; bottom: 16px; z-index: 250; display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 14px; background: var(--tc-toast-bg); border: 1px solid var(--teal); box-shadow: 0 18px 40px rgba(var(--tc-sh),.45); color: var(--tc-fg); max-width: calc(100% - 32px); transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .35s var(--ease), visibility 0s .35s; } body[data-concept="01"] .tc-toast.is-on { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; } body[data-concept="01"] .tc-toast-ic { flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--ink); } body[data-concept="01"] .tc-toast-ic svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-toast-t { font-weight: 600; font-size: 15px; } body[data-concept="01"] .tc-toast-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; font-weight: 700; color: var(--tc-acc); text-decoration: none; } body[data-concept="01"] .tc-toast-go svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-toast-go:hover { color: var(--tc-fg); } @media (max-width: 767.98px) { body[data-concept="01"] .tc-toast { left: 16px; bottom: 86px; } } /* ---------- regions ---------- */ body[data-concept="01"] .tc-tide[aria-current="page"] .tc-tide-bar { background: var(--teal); } body[data-concept="01"] .tc-tide[aria-current="page"] .tc-tide-name { color: var(--tc-acc); } body[data-concept="01"] .tc-tide-sp { display: block; margin-top: 4px; color: var(--tc-tint); } body[data-concept="01"] .tc-mtides { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 32px; grid-template-columns: 1fr; border-top: 1px solid var(--tc-line); } @media (min-width: 768px) { body[data-concept="01"] .tc-mtides { grid-template-columns: 1fr 1fr; } } body[data-concept="01"] .tc-mtide { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "i name" "i bar"; gap: 6px 10px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--tc-line); color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-mtide-i { grid-area: i; font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-mtide-name { grid-area: name; font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; } body[data-concept="01"] .tc-mtide-bar { grid-area: bar; height: 8px; width: var(--len); max-width: 100%; border-radius: 2px; background: var(--tc-bar); opacity: .9; transition: width .45s var(--ease), background .2s var(--ease); } body[data-concept="01"] .tc-mtide:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-mtide:hover .tc-mtide-bar { width: calc(var(--len) + 8%); background: var(--tc-bar-hi); } body[data-concept="01"] .tc-mtide[aria-current="page"] .tc-mtide-bar { background: var(--teal); } body[data-concept="01"] .tc-essay-grid { display: grid; gap: 18px; } @media (min-width: 992px) { body[data-concept="01"] .tc-essay-grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } } body[data-concept="01"] .tc-pidx { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { body[data-concept="01"] .tc-pidx { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } } body[data-concept="01"] .tc-pidx-r { padding: 14px 16px 16px; border: 1px solid var(--tc-line); border-radius: 14px; background: var(--tc-glass); } body[data-concept="01"] .tc-pidx-h { display: flex; align-items: baseline; gap: 8px; min-height: 44px; font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.05; color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-pidx-h span { font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-pidx-h:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-pidx ol { list-style: none; margin: 4px 0 0; padding: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--tc-tint2); } body[data-concept="01"] .tc-pidx ol li { padding: 4px 0; border-top: 1px dashed var(--tc-line); } /* region: where it sits in the run */ body[data-concept="01"] .tc-run { margin: 18px 0 4px; max-width: 760px; } body[data-concept="01"] .tc-run-read { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-run-read b { color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-run-line { position: relative; list-style: none; margin: 0 22px; padding: 0; height: 48px; } body[data-concept="01"] .tc-run-line::before { content: ""; position: absolute; left: 0; right: 0; top: 21px; height: 2px; background: repeating-linear-gradient(90deg, rgba(var(--tc-ln),.45) 0 6px, rgba(var(--tc-ln),0) 6px 12px); } body[data-concept="01"] .tc-run-line::after { content: ""; position: absolute; left: 0; top: 21px; height: 2px; width: calc(var(--pos) * 1%); background: var(--teal); } body[data-concept="01"] .tc-run-stop { position: absolute; left: calc(var(--at) * 1%); top: 0; transform: translateX(-50%); z-index: 1; } body[data-concept="01"] .tc-run-stop a { position: relative; display: grid; place-items: center; width: 40px; height: 44px; color: var(--tc-fg); text-decoration: none; } body[data-concept="01"] .tc-run-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tc-run-bg); border: 1px solid rgba(var(--tc-ln),.55); font-family: var(--mono); font-size: 14px; transition: background .2s var(--ease), color .2s var(--ease); } body[data-concept="01"] .tc-run-stop a:hover .tc-run-n { background: var(--tc-fg); color: var(--tc-inv); } body[data-concept="01"] .tc-run-stop.is-here .tc-run-n { background: var(--teal); color: var(--ink); border-color: var(--teal); animation: tc-ping 2.4s ease-out infinite; } body[data-concept="01"] .tc-run-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body[data-concept="01"] .tc-reg-intro { display: grid; gap: 26px; } @media (min-width: 992px) { body[data-concept="01"] .tc-reg-intro { grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; } } body[data-concept="01"] .tc-reading { padding: 22px; --bs-card-border-radius: 18px; border-left: 3px solid var(--teal); } body[data-concept="01"] .tc-reading-h { font-size: clamp(30px, 3vw, 44px); margin: 0 0 12px; color: var(--tc-fg); } body[data-concept="01"] .tc-reading .tc-prose { font-size: 17px; } body[data-concept="01"] .tc-tt-grid { display: grid; gap: 28px; } @media (min-width: 768px) { body[data-concept="01"] .tc-tt-grid { grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; } } body[data-concept="01"] .tc-tt table { width: 100%; border-collapse: collapse; } body[data-concept="01"] .tc-tt caption { caption-side: top; text-align: left; padding: 0 0 10px; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-tt th { font-family: var(--mono); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-acc); text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid rgba(var(--tc-ln),.4); } body[data-concept="01"] .tc-tt td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--tc-line); vertical-align: middle; } body[data-concept="01"] .tc-tt-n { width: 48px; font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-tt-v { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(20px, 2vw, 26px); letter-spacing: .01em; line-height: 1.05; } body[data-concept="01"] .tc-tt-bar { width: 36%; } body[data-concept="01"] .tc-tt-bar i { display: block; height: 6px; width: var(--len); border-radius: 2px; background: var(--tc-bar); opacity: .75; } body[data-concept="01"] .tc-tt.is-sp .tc-tt-bar i { background: var(--teal); opacity: 1; } /* previous / next along the coast or the log */ body[data-concept="01"] .tc-pn-sec .tc-wrap { padding-top: 28px; padding-bottom: 28px; } body[data-concept="01"] .tc-pn { display: grid; gap: 10px; } @media (min-width: 768px) { body[data-concept="01"] .tc-pn { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; } } body[data-concept="01"] .tc-pn-a { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border: 1px solid var(--tc-line2); border-radius: 14px; color: var(--bs-body-color); text-decoration: none; transition: border-color .2s var(--ease), background .2s var(--ease); } body[data-concept="01"] .tc-pn-a.is-next { text-align: right; align-items: flex-end; } body[data-concept="01"] .tc-pn-a:hover { border-color: var(--teal); background: rgba(var(--tc-glow),.08); } body[data-concept="01"] .tc-pn-l { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-pn-l svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-pn-t { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; text-wrap: balance; } body[data-concept="01"] .tc-pn-t.is-sm { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; } body[data-concept="01"] .tc-pn-hub { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--tc-line2); color: var(--tc-fg); font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } body[data-concept="01"] .tc-pn-hub svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-pn-hub:hover { background: var(--tc-fg); color: var(--tc-inv); } /* ---------- journal and articles ---------- */ body[data-concept="01"] .tc-agrid { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 576px) { body[data-concept="01"] .tc-agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { body[data-concept="01"] .tc-agrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } body[data-concept="01"] .tc-agrid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } body[data-concept="01"] .tc-acard { display: flex; flex-direction: column; overflow: hidden; color: var(--bs-body-color); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } body[data-concept="01"] .tc-acard:hover { transform: translateY(-5px); box-shadow: 0 0 0 1px var(--teal), 0 22px 44px rgba(var(--tc-glow),.2); } body[data-concept="01"] .tc-acard-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; } body[data-concept="01"] .tc-acard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); } body[data-concept="01"] .tc-acard:hover .tc-acard-img img { transform: scale(1.04); } body[data-concept="01"] .tc-acard-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 18px 18px; } body[data-concept="01"] .tc-acard-meta { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-acard-t { font-family: Barlow, "Helvetica Neue", Arial, sans-serif; text-transform: none; font-weight: 700 !important; font-size: 20px; letter-spacing: 0; line-height: 1.25; margin: 0; } body[data-concept="01"] .tc-acard-x { font-size: 15px; line-height: 1.5; color: var(--bs-secondary-color); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body[data-concept="01"] .tc-acard-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; font-family: var(--mono); font-size: 14px; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-read { display: inline-flex; align-items: center; gap: 6px; color: var(--tc-acc); font-weight: 700; font-family: Barlow, "Helvetica Neue", Arial, sans-serif; font-size: 15px; } body[data-concept="01"] .tc-read svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-jfilter { margin: 0 0 22px; } body[data-concept="01"] .tc-cover { display: grid; position: relative; color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-cover-img { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; } body[data-concept="01"] .tc-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } body[data-concept="01"] .tc-cover:hover .tc-cover-img img { transform: scale(1.03); } body[data-concept="01"] .tc-cover-body { display: flex; flex-direction: column; gap: 10px; padding: 20px; margin: -40px 12px 0; position: relative; z-index: 1; --bs-card-border-radius: 16px; background-color: rgba(var(--tc-sc),.82); } body[data-concept="01"] .tc-cover-k { font-family: var(--mono); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tc-acc); } body[data-concept="01"] .tc-cover-t { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(30px, 3.8vw, 58px); line-height: .98; } body[data-concept="01"] .tc-cover-x { font-size: 17px; color: var(--tc-tint2); max-width: 56ch; } body[data-concept="01"] .tc-cover-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; font-family: var(--mono); font-size: 14px; color: var(--bs-secondary-color); } @media (min-width: 992px) { body[data-concept="01"] .tc-cover { grid-template-columns: 1.25fr 1fr; align-items: center; } body[data-concept="01"] .tc-cover-img { aspect-ratio: 16 / 11; } body[data-concept="01"] .tc-cover-body { margin: 0 0 0 -90px; padding: 32px; } } body[data-concept="01"] .tc-band-article h1 { max-width: 24ch; } body[data-concept="01"] .tc-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 10px; } body[data-concept="01"] .tc-byline p { margin: 0; display: flex; flex-direction: column; font-size: 15px; color: var(--tc-tint2); } body[data-concept="01"] .tc-byline b { color: var(--tc-fg); font-size: 17px; } body[data-concept="01"] .tc-byline-meta { flex-direction: row !important; gap: 14px; font-family: var(--mono); font-size: 14px !important; letter-spacing: .08em; text-transform: uppercase; padding-left: 16px; border-left: 1px solid var(--tc-line2); } body[data-concept="01"] .tc-byline-mark { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--teal); color: var(--ink); font-family: Anton, "Arial Narrow", sans-serif; font-size: 22px; } body[data-concept="01"] .tc-byline-mark.is-lg { width: 64px; height: 64px; font-size: 30px; flex-shrink: 0; } body[data-concept="01"] .tc-article { display: grid; gap: 22px; } @media (min-width: 992px) { body[data-concept="01"] .tc-article { grid-template-columns: 190px minmax(0, 1fr); gap: 48px; } body[data-concept="01"] .tc-asside { position: sticky; top: calc(var(--rn-h) + 28px); align-self: start; } } body[data-concept="01"] .tc-article-sec .tc-wrap { padding-top: clamp(28px, 3vw, 44px); } body[data-concept="01"] .tc-asside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } @media (min-width: 992px) { body[data-concept="01"] .tc-asside { flex-direction: column; align-items: flex-start; } } body[data-concept="01"] .tc-asside .tc-toc-h { margin: 0; } body[data-concept="01"] .tc-asside-reg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--tc-fg); font-weight: 700; text-decoration: none; } body[data-concept="01"] .tc-asside-reg span { font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-asside-reg:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-asside-read { margin: 0; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-tint2); } body[data-concept="01"] .tc-ahero { margin: 0 0 28px; } body[data-concept="01"] .tc-ahero img { width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 18px; display: block; } body[data-concept="01"] .tc-ahero figcaption { margin-top: 8px; font-size: 14px; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-prose.is-article { max-width: 70ch; } body[data-concept="01"] .tc-author { display: flex; gap: 18px; align-items: flex-start; padding: 22px; margin-top: 36px; max-width: 70ch; --bs-card-border-radius: 16px; } body[data-concept="01"] .tc-author p { margin: 0; } body[data-concept="01"] .tc-author-n { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1; color: var(--tc-fg); } body[data-concept="01"] .tc-author-r { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-tint); margin: 6px 0 10px !important; } body[data-concept="01"] .tc-author-b { font-size: 16px; color: var(--tc-tint2); } /* long-form: guide, size guide, shipping, policies */ body[data-concept="01"] .tc-longform { display: grid; gap: 24px; } @media (min-width: 992px) { body[data-concept="01"] .tc-longform { grid-template-columns: 250px minmax(0, 1fr); gap: 56px; } body[data-concept="01"] .tc-longform-side { position: sticky; top: calc(var(--rn-h) + 24px); align-self: start; max-height: calc(100vh - var(--rn-h) - 48px); overflow: auto; } } body[data-concept="01"] .tc-toc-h { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc); margin: 0 0 10px; } body[data-concept="01"] .tc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--tc-line2); } body[data-concept="01"] .tc-toc a { display: flex; gap: 10px; align-items: baseline; padding: 9px 0 9px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--tc-tint2); text-decoration: none; font-size: 15px; line-height: 1.35; } body[data-concept="01"] .tc-toc a:hover { color: var(--tc-fg); border-left-color: var(--teal); } body[data-concept="01"] .tc-toc a.is-here { color: var(--tc-fg); border-left-color: var(--teal); } body[data-concept="01"] .tc-toc-n { font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } @media (max-width: 991.98px) { body[data-concept="01"] .tc-toc { padding: 16px; border: 1px solid var(--tc-line); border-radius: 14px; background: var(--tc-glass); } } body[data-concept="01"] .tc-psec { background: transparent; padding: 30px 0; border-top: 1px solid var(--tc-line); scroll-margin-top: calc(var(--rn-h) + 20px); } body[data-concept="01"] .tc-psec:first-child { border-top: 0; padding-top: 0; } body[data-concept="01"] .tc-psec h2 { font-size: clamp(30px, 3.2vw, 48px); margin: 6px 0 16px; } body[data-concept="01"] .tc-psec-n { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; color: var(--tc-acc); margin: 0; } body[data-concept="01"] .tc-psec.is-quiet { padding: 22px 0; } body[data-concept="01"] .tc-psec.is-quiet h2 { font-size: clamp(24px, 2.2vw, 30px); margin: 0 0 12px; } body[data-concept="01"] .tc-longform.is-quiet .tc-prose { font-size: 16px; } body[data-concept="01"] .tc-info-intro { padding: 18px 20px; border-left: 3px solid var(--teal); background: var(--tc-glass); border-radius: 0 14px 14px 0; margin-bottom: 18px; } body[data-concept="01"] .tc-info-intro p:last-child { margin-bottom: 0; } /* ---------- about ---------- */ body[data-concept="01"] .tc-chap { display: grid; gap: 20px; padding: clamp(26px, 4vw, 56px) 0; border-top: 1px solid var(--tc-line); } body[data-concept="01"] .tc-chap:first-of-type { border-top: 0; padding-top: 0; } @media (min-width: 768px) { body[data-concept="01"] .tc-chap { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } body[data-concept="01"] .tc-chap.is-flip .tc-chap-copy { order: 2; } } body[data-concept="01"] .tc-chap-k { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-tint); } body[data-concept="01"] .tc-chap-k span:first-child { color: var(--tc-acc); } body[data-concept="01"] .tc-chap-d { margin-left: auto; padding: 2px 8px; border: 1px solid var(--tc-line2); border-radius: 6px; color: var(--tc-fg); } body[data-concept="01"] .tc-chap-h { font-size: clamp(32px, 4vw, 60px); margin: 0 0 14px; color: var(--tc-fg); } body[data-concept="01"] .tc-chap-t { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--tc-tint2); max-width: 52ch; margin: 0; } body[data-concept="01"] .tc-chap-img { margin: 0; } body[data-concept="01"] .tc-chap-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; display: block; } body[data-concept="01"] .tc-chap-crew { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } body[data-concept="01"] .tc-chap-crew img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; display: block; } body[data-concept="01"] .tc-chap-crew img:nth-child(even) { transform: translateY(18px); } body[data-concept="01"] .tc-quote-sec .tc-story-quote { margin: 0; } body[data-concept="01"] .tc-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } @media (min-width: 768px) { body[data-concept="01"] .tc-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } } body[data-concept="01"] .tc-rule { padding: 22px; border: 1px solid var(--tc-line); border-radius: 16px; background: var(--tc-glass); } body[data-concept="01"] .tc-rule-n { display: block; font-family: Anton, "Arial Narrow", sans-serif; font-size: 64px; line-height: .95; color: transparent; -webkit-text-stroke: 1.5px var(--tc-acc); margin-bottom: 10px; } body[data-concept="01"] .tc-rule h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 10px; color: var(--tc-fg); } body[data-concept="01"] .tc-rule p { margin: 0; color: var(--tc-tint2); font-size: 17px; line-height: 1.55; } body[data-concept="01"] .tc-tl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 2px dashed rgba(var(--tc-ln),.3); display: grid; gap: 26px; } body[data-concept="01"] .tc-tl-i { position: relative; } body[data-concept="01"] .tc-tl-i::before { content: ""; position: absolute; left: -34px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(var(--tc-glow),.25); } body[data-concept="01"] .tc-tl-y { display: block; font-family: var(--mono); font-size: 16px; letter-spacing: .14em; color: var(--tc-acc); margin-bottom: 6px; } body[data-concept="01"] .tc-tl-i h3 { font-size: clamp(24px, 2.2vw, 32px); margin: 0 0 8px; color: var(--tc-fg); } body[data-concept="01"] .tc-tl-i p { margin: 0; color: var(--tc-tint2); font-size: 17px; line-height: 1.55; max-width: 48ch; } @media (min-width: 992px) { body[data-concept="01"] .tc-tl { grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 0; border-top: 2px dashed rgba(var(--tc-ln),.3); padding: 30px 0 0; gap: 28px; } body[data-concept="01"] .tc-tl-i::before { left: 0; top: -38px; } } /* ---------- contact, account ---------- */ body[data-concept="01"] .tc-helps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 992px) { body[data-concept="01"] .tc-helps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } body[data-concept="01"] .tc-help { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px; text-align: left; border-radius: 14px; border: 1px solid var(--tc-line2); background: var(--tc-glass); color: var(--bs-body-color); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); } body[data-concept="01"] .tc-help:hover { border-color: var(--tc-acc); } body[data-concept="01"] .tc-help[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--ink); } body[data-concept="01"] .tc-help-n { font-family: var(--mono); font-size: 14px; color: var(--tc-acc); } body[data-concept="01"] .tc-help-t { font-weight: 700; font-size: 18px; line-height: 1.25; } body[data-concept="01"] .tc-help-x { font-size: 15px; line-height: 1.45; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-help[aria-pressed="true"] .tc-help-n, body[data-concept="01"] .tc-help[aria-pressed="true"] .tc-help-x { color: var(--ink); } body[data-concept="01"] .tc-contact-grid { display: grid; gap: 22px; } @media (min-width: 992px) { body[data-concept="01"] .tc-contact-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 32px; align-items: start; } } body[data-concept="01"] .tc-form { padding: 22px; --bs-card-border-radius: 18px; } @media (min-width: 768px) { body[data-concept="01"] .tc-form { padding: 30px; } } body[data-concept="01"] .tc-form-row { display: grid; gap: 0 14px; } @media (min-width: 576px) { body[data-concept="01"] .tc-form-row { grid-template-columns: 1fr 1fr; } } body[data-concept="01"] .tc-field { margin-bottom: 16px; } body[data-concept="01"] .tc-field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--tc-fg); } body[data-concept="01"] .tc-form .form-control, body[data-concept="01"] .tc-form .form-select { min-height: 48px; font-size: 16px; color: var(--tc-fg); background-color: rgba(var(--tc-sc),.6); border: 1px solid var(--tc-line2); border-radius: 10px; } body[data-concept="01"] .tc-form .form-select option { color: var(--ink); background: var(--white); } body[data-concept="01"] .tc-form .form-control:focus, body[data-concept="01"] .tc-form .form-select:focus { border-color: var(--teal); box-shadow: 0 0 0 .2rem rgba(var(--tc-glow),.3); } body[data-concept="01"] .tc-form [aria-invalid="true"] { border-color: var(--coral); } body[data-concept="01"] .tc-err { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--tc-err); } body[data-concept="01"] .tc-form-consent { font-size: 14px; color: var(--bs-secondary-color); margin: 0 0 16px; } body[data-concept="01"] .tc-form-consent a { color: var(--tc-acc); } body[data-concept="01"] .tc-form-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } body[data-concept="01"] .tc-sent { border-left: 3px solid var(--teal); } body[data-concept="01"] .tc-sent-h { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 46px); line-height: 1; margin: 0 0 12px; color: var(--tc-fg); } body[data-concept="01"] .tc-csides { display: grid; gap: 14px; } body[data-concept="01"] .tc-cside { padding: 20px; --bs-card-border-radius: 16px; } body[data-concept="01"] .tc-email { margin: 0 0 12px; font-size: clamp(18px, 1.8vw, 22px); font-weight: 700; color: var(--tc-fg); user-select: all; overflow-wrap: anywhere; } body[data-concept="01"] .tc-email-ctas { display: flex; flex-wrap: wrap; gap: 10px; } body[data-concept="01"] .tc-copied { min-height: 22px; margin: 8px 0 0; font-family: var(--mono); font-size: 14px; letter-spacing: .06em; color: var(--tc-acc); } body[data-concept="01"] .tc-cside-big { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: 26px; line-height: 1.05; margin: 0; color: var(--tc-fg); } body[data-concept="01"] .tc-cside-x { font-size: 16px; line-height: 1.55; color: var(--tc-tint2); margin: 8px 0 0; } body[data-concept="01"] .tc-cside-x a { color: var(--tc-acc); } body[data-concept="01"] .tc-acct { display: grid; gap: 24px; } @media (min-width: 992px) { body[data-concept="01"] .tc-acct { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: start; } } body[data-concept="01"] #tc-aform { border-style: dashed; } body[data-concept="01"] .tc-acct-h { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(32px, 3.6vw, 52px); line-height: .98; margin: 0 0 4px; color: var(--tc-fg); } body[data-concept="01"] .tc-sent-msg { min-height: 24px; margin: 14px 0; font-weight: 600; color: var(--tc-acc); } body[data-concept="01"] .tc-acct-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; } body[data-concept="01"] .tc-acct-list li { display: flex; align-items: center; gap: 12px; font-size: 17px; color: var(--tc-tint2); } body[data-concept="01"] .tc-acct-list svg { width: 22px; height: 22px; color: var(--tc-acc); flex-shrink: 0; } /* ---------- cart: the haul ---------- */ body[data-concept="01"] .tc-cart { display: grid; gap: 24px; } @media (min-width: 992px) { body[data-concept="01"] .tc-cart { grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; } body[data-concept="01"] .tc-cart-sum { position: sticky; top: calc(var(--rn-h) + 16px); } body[data-concept="01"] .tc-cart.is-empty { grid-template-columns: 1fr; } } body[data-concept="01"] .tc-cart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--tc-line2); padding-bottom: 10px; } body[data-concept="01"] .tc-cart-head h2 { margin: 0; } body[data-concept="01"] .tc-lines { list-style: none; margin: 0; padding: 0; } body[data-concept="01"] .tc-line { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "img info total" "img qty rm"; gap: 10px 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--tc-line); } @media (min-width: 768px) { body[data-concept="01"] .tc-line { grid-template-columns: 104px minmax(0, 1fr) auto 110px auto; grid-template-areas: "img info qty total rm"; gap: 18px; } } body[data-concept="01"] .tc-line-img { grid-area: img; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--white); border: 1px solid var(--line); } body[data-concept="01"] .tc-line-img img { width: 100%; height: 100%; object-fit: cover; display: block; } body[data-concept="01"] .tc-line-info { grid-area: info; min-width: 0; } body[data-concept="01"] .tc-line-info p { margin: 0; } body[data-concept="01"] .tc-line-t { font-weight: 700; font-size: 17px; line-height: 1.3; } body[data-concept="01"] .tc-line-t a { color: var(--tc-fg); text-decoration: none; } body[data-concept="01"] .tc-line-t a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-line-v, body[data-concept="01"] .tc-line-u { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--tc-tint); margin-top: 4px !important; } body[data-concept="01"] .tc-line-u del { color: var(--bs-secondary-color); margin-right: .4em; } body[data-concept="01"] .tc-line-q { grid-area: qty; height: 46px; justify-self: start; } body[data-concept="01"] .tc-line-total { grid-area: total; margin: 0; text-align: right; font-size: 17px; color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-line-rm { grid-area: rm; display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--tc-tint); font-size: 14px; font-weight: 600; cursor: pointer; justify-self: end; } body[data-concept="01"] .tc-line-rm svg { width: 18px; height: 18px; } body[data-concept="01"] .tc-line-rm:hover { color: var(--tc-fg); } body[data-concept="01"] .tc-cart-sum { padding: 22px; --bs-card-border-radius: 18px; } body[data-concept="01"] .tc-sum-dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0 0 6px; } body[data-concept="01"] .tc-sum-dl dt { font-weight: 600; font-size: 16px; } body[data-concept="01"] .tc-sum-dl dd { margin: 0; text-align: right; font-family: var(--mono); font-size: 16px; color: var(--tc-fg); } body[data-concept="01"] .tc-sum-dl dd[data-cart-subtotal] { font-size: 24px; font-weight: 700; } body[data-concept="01"] .tc-sum-ship { font-size: 14px !important; color: var(--tc-tint) !important; } body[data-concept="01"] .tc-free-wrap { margin: 16px 0 18px; } body[data-concept="01"] .tc-free { position: relative; margin: 0; padding-bottom: 22px; font-family: var(--mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-tint2); } body[data-concept="01"] .tc-free::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(var(--tc-ln),.14) 0 calc(25% - 2px), rgba(var(--tc-ln),.32) calc(25% - 2px) 25%); } body[data-concept="01"] .tc-free::after { content: ""; position: absolute; left: 0; bottom: 0; height: 10px; width: var(--free-pct, 0%); border-radius: 6px; background: linear-gradient(90deg, var(--tc-s1), var(--teal)); box-shadow: 0 0 14px rgba(var(--tc-glow),.6); transition: width .6s var(--ease); } body[data-concept="01"] .tc-free.is-free { color: var(--tc-fg); font-weight: 700; } body[data-concept="01"] .tc-free.is-free::after { background: var(--teal-t1); } body[data-concept="01"] .tc-free-ticks { display: flex; justify-content: space-between; margin-top: 6px; font-family: var(--mono); font-size: 14px; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-checkout { width: 100%; } body[data-concept="01"] .tc-checkout.is-off { display: none; } body[data-concept="01"] .tc-sum-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 6px; font-size: 14px; color: var(--tc-tint); } body[data-concept="01"] .tc-sum-note svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-sum-cont { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: var(--tc-fg); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } body[data-concept="01"] .tc-sum-cont svg { width: 16px; height: 16px; } body[data-concept="01"] .tc-sum-cont:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-cart-empty { padding: 28px 0 0; } body[data-concept="01"] .tc-cart-empty p { color: var(--tc-tint2); font-size: 17px; } body[data-concept="01"] .tc-cart-empty .tc-chips { margin-bottom: 18px; } body[data-concept="01"] .tc-cart-empty-k { font-family: var(--mono); font-size: 14px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc) !important; margin: 0 0 6px; } body[data-concept="01"] .tc-cart-empty-h { font-family: Anton, "Arial Narrow", sans-serif; text-transform: uppercase; font-size: clamp(38px, 5vw, 72px) !important; line-height: .95; margin: 0 0 12px; color: var(--tc-fg) !important; } /* ---------- search: sonar ---------- */ body[data-concept="01"] .tc-sform { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 6px 6px 14px; border-radius: 16px; border: 1px solid rgba(var(--tc-ln),.4); background: rgba(var(--tc-sc),.7); max-width: 860px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } body[data-concept="01"] .tc-sform:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(var(--tc-glow),.3); } body[data-concept="01"] .tc-sform-ic svg { width: 24px; height: 24px; color: var(--tc-acc); display: block; } body[data-concept="01"] .tc-sform-in { flex: 1; min-width: 0; min-height: 56px; border: 0; background: transparent; color: var(--tc-fg); font-size: clamp(19px, 2.4vw, 28px); font-weight: 600; outline: none; } body[data-concept="01"] .tc-sform-in::placeholder { color: var(--tc-tint); opacity: .8; font-weight: 400; } body[data-concept="01"] .tc-pop { margin-top: 18px; } @media (max-width: 575.98px) { body[data-concept="01"] .tc-sform .btn { padding-left: .9rem; padding-right: .9rem; } } body[data-concept="01"] .tc-sres { margin-top: 18px; } body[data-concept="01"] .tc-sgroup { margin-bottom: 30px; } body[data-concept="01"] .tc-sgroup-h { display: flex; align-items: baseline; gap: 12px; font-size: clamp(26px, 2.6vw, 36px); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--tc-line2); color: var(--tc-fg); } body[data-concept="01"] .tc-sgroup-n { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; color: var(--tc-acc); } body[data-concept="01"] .tc-sprods { display: grid; gap: 10px; grid-template-columns: 1fr; } @media (min-width: 768px) { body[data-concept="01"] .tc-sprods { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1200px) { body[data-concept="01"] .tc-sprods { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body[data-concept="01"] .tc-sp { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 14px; border: 1px solid var(--tc-line); background: var(--tc-glass); color: var(--bs-body-color); text-decoration: none; transition: border-color .2s var(--ease); } body[data-concept="01"] .tc-sp:hover { border-color: var(--teal); } body[data-concept="01"] .tc-sp img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--white); border: 1px solid var(--line); display: block; } body[data-concept="01"] .tc-sp-t { display: block; font-weight: 700; font-size: 17px; line-height: 1.3; } body[data-concept="01"] .tc-sp-m { display: block; margin-top: 4px; font-family: var(--mono); font-size: 14px; color: var(--tc-tint); } body[data-concept="01"] .tc-slist { list-style: none; margin: 0; padding: 0; } body[data-concept="01"] .tc-slist a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--tc-line); color: var(--bs-body-color); text-decoration: none; } body[data-concept="01"] .tc-slist a:hover { color: var(--tc-acc); } body[data-concept="01"] .tc-slist b { font-weight: 700; font-size: 17px; } body[data-concept="01"] .tc-slist span { font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--tc-tint); } body[data-concept="01"] mark { background: rgba(var(--tc-glow),.35); color: inherit; padding: 0 .12em; border-radius: 3px; } body[data-concept="01"] .tc-snone { padding: 24px; border: 1px dashed var(--tc-line2); border-radius: 16px; } body[data-concept="01"] .tc-snone p { color: var(--tc-tint2); font-size: 17px; } /* ---------- 404: lost at depth ---------- */ body[data-concept="01"] .tc-band-404 .tc-band-in { min-height: 62vh; display: flex; flex-direction: column; justify-content: flex-end; } body[data-concept="01"] .tc-404-code { position: absolute; right: -2%; bottom: 4%; z-index: -1; margin: 0; pointer-events: none; font-family: Anton, "Arial Narrow", sans-serif; font-size: clamp(150px, 34vw, 420px); line-height: .85; color: transparent; -webkit-text-stroke: 2px var(--tc-404); animation: tc-hover 9s ease-in-out infinite; } /* footer */ body[data-concept="01"] .tc-ftr-h { font-family: var(--mono); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--tc-acc); margin: 0 0 10px; line-height: 1.4; } body[data-concept="01"] .tc-ftr-depth { margin: 14px 0 0; font-family: var(--mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--bs-secondary-color); } body[data-concept="01"] .tc-ftr ul a[aria-current] { color: var(--tc-acc); } /* reduced motion: everything settles in its resting place */ @media (prefers-reduced-motion: reduce) { body[data-concept="01"] .tc-band-water i, body[data-concept="01"] .tc-band-surface, body[data-concept="01"] .tc-pc-media::after, body[data-concept="01"] .tc-slide.is-cut::after { animation: none; display: none; } body[data-concept="01"] .tc-pc-cut, body[data-concept="01"] .tc-stage-cut, body[data-concept="01"] .tc-stage-glow, body[data-concept="01"] .tc-readout-l::before, body[data-concept="01"] .tc-run-stop.is-here .tc-run-n, body[data-concept="01"] .tc-404-code { animation: none; } body[data-concept="01"] .tc-band h1.tc-fillin { animation: none; color: var(--tc-fg); } } /* fish face left: swim right to left */ body[data-concept="01"] .tc-fish-red { animation-direction: reverse; } /* Chris 2026-10-07: filled display headings flipped, solid fill in the old stroke colour (white on the dark grounds), outlined in the accent. Outline-only heroes (no .tc-fill) are unchanged. */ body[data-concept="01"] .tc-disp.tc-fill { --fill: var(--tc-stroke) !important; -webkit-text-stroke: 3px var(--tc-acc); } @media (max-width: 767.98px) { body[data-concept="01"] .tc-disp.tc-fill { -webkit-text-stroke-width: 2px; } } /* Chris 2026-10-07: the home hero H1 fill blinks white on and off (outline stays). Slow, well under 3 flashes a second; reduced motion keeps the plain outline. */ @keyframes tc-h1-blink { 0%, 49.9% { color: transparent; } 50%, 100% { color: #FFFFFF; } } @keyframes tc-h1-glow { 0%, 35% { text-shadow: 0 0 0 rgba(35,182,199,0), 0 0 0 rgba(35,182,199,0); } 75% { text-shadow: 0 0 18px rgba(35,182,199,.9), 0 0 46px rgba(35,182,199,.55); } 100% { text-shadow: 0 0 6px rgba(35,182,199,.3), 0 0 14px rgba(35,182,199,.15); } } @media (prefers-reduced-motion: no-preference) { body[data-concept="01"][data-page="home"] #tc-h1 { animation: tc-h1-blink 4s step-end infinite, tc-h1-glow 4s ease-in-out infinite; } }