/* ============================================================================
Chungyi Tea — shared theme layer
Design tokens + header system + motion/reveal styling + UI refinements.
Loaded on every page in ; applies to the dc-runtime render in #dc-root.
========================================================================== */
/* --- Web fonts ----------------------------------------------------------- */
/* Hanken Grotesk + Cormorant Garamond come from the Google Fonts .
LXGW WenKai TC (hand-brushed kaiti) comes from the jsDelivr .
Font stacks fall back to the original Noto Serif TC / Manrope. */
/* --- Design tokens ------------------------------------------------------- */
:root{
/* Paper / surfaces */
--paper:#f5efe2;
--paper-2:#fbf7ec;
--paper-3:#efe6d4;
/* Pine greens (tea leaf / forest) */
--pine:#1c3528;
--pine-deep:#16291f;
--pine-2:#244033;
/* Ink / text */
--ink:#29231e;
--ink-soft:#3a3225;
--ink-muted:#7a6f5e;
/* Brass / gold (oolong, brass tins) */
--brass:#a9863f;
--gold:#d9b86a;
--gold-light:#e7c987;
--gold-ink:#8a6a2f; /* darker gold — accessible on cream */
/* Cinnabar seal red (the 忠 chop) */
--seal:#a93226;
--seal-deep:#922a1f;
/* NEW category accents */
--jade:#5b8c6e; /* green / fresh teas */
--amber:#b9742f; /* roasted teas */
/* Lines / radii / shadow / motion */
--line:rgba(28,53,40,0.10);
--radius:14px;
--radius-lg:18px;
--shadow-sm:0 12px 32px -20px rgba(28,53,40,.55);
--shadow-md:0 26px 54px -28px rgba(28,53,40,.55);
--ease:cubic-bezier(.22,.61,.36,1);
}
html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
/* Responsive safety: never let media break out of the viewport. */
img,svg,video,iframe{max-width:100%;}
/* --- Accessibility ------------------------------------------------------- */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--brass);
outline-offset:3px;
border-radius:4px;
}
/* --- Scroll-aware primary nav ------------------------------------------- */
nav[aria-label="Primary"]{
transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
html.dc-scrolled nav[aria-label="Primary"]{
background:rgba(245,239,226,0.97)!important;
box-shadow:0 8px 26px -18px rgba(28,53,40,.55);
}
/* --- Header system (all pages) ------------------------------------------ */
[data-page-header]{position:relative;isolation:isolate;}
/* Still background image behind the existing scrim; 128% tall for parallax. */
.dc-head-img{
position:absolute;inset:0;
width:100%;height:128%;
object-fit:cover;
z-index:-2;
will-change:transform;
transform:translateZ(0);
}
/* Fine film grain for depth / warmth. */
[data-page-header]::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity:.10;mix-blend-mode:overlay;
}
/* Gold hairline along the bottom edge. */
[data-page-header]::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
background:linear-gradient(90deg,transparent,var(--brass) 16%,var(--gold-light) 50%,var(--brass) 84%,transparent);
opacity:.85;
}
/* Reveal-on-scroll is owned by each page's dc-script (IntersectionObserver in
componentDidMount), so the theme layer intentionally does not hide or animate
[data-reveal] / [data-hero-lockup] — that would double-animate them. */
/* --- Category accent chips (optional, for tea-type tags) ---------------- */
.tag-green{color:var(--jade)!important;}
.tag-roasted{color:var(--amber)!important;}
/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.dc-head-img{transform:none!important;height:100%!important;}
}