already exceeds the flex space so scrolling works as normal. */ body{display:flex;flex-direction:column;min-height:100vh} main{flex:1 0 auto} /* v-authpolish — login/forgot/register auth-field labels were missing the icon gap that edit_profile.php and change_password.php already use (inline margin-right:4px on the ) — icon ran straight into the label text ("✉อีเมล / Username"). One shared rule instead of patching every view's inline style. Also gives .auth-icon a touch of depth so the flat black square doesn't sit dead-flat against the card. */ .auth-field label i{margin-right:4px} .auth-icon{box-shadow:0 8px 20px rgba(16,16,16,.22)} /* v-socialicons — footer .social a inherits font-size:12px + margin:7px 0 from the generic ".footer a:not(.brand)" rule; the icon glyph was rendering small and the leftover margin nudged the box off the circle's true center. display:grid + place-items:center already centers the icon box correctly — this just resets the inherited margin and gives the glyph a bit more size so it reads as centered. */ .social a{margin:0;font-size:15px;line-height:1} /* v-motion — Motion Kit (React Bits–inspired effects, ported to vanilla CSS/JS). Engine lives in js/common.js so BOTH layouts get it (admin.php deliberately does not load app.js). Everything here is opt-in via data-* attributes; the engine auto-tags a small allow-list of existing classes (.story, .card-grid children, .section-head, .metric, .quick-action, .panel) so no view file has to change to get scroll reveals. Ported from: FadeContent + AnimatedContent + ScrollFloat + BlurText (reveal), CountUp + Counter (countup), ShinyText (shiny), SpotlightCard (spotlight), GlareHover (glare), StarBorder (starborder), Magnet (magnet), ClickSpark (spark), ScrollVelocity (marquee), DecryptedText (scramble). No new !important — this layer is last in the file, so plain selectors win. Every effect is disabled under prefers-reduced-motion at the bottom. */ /* --- reveal: FadeContent / AnimatedContent / ScrollFloat / BlurText --- */ [data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity .72s cubic-bezier(.22,.61,.36,1), transform .72s cubic-bezier(.22,.61,.36,1), filter .72s cubic-bezier(.22,.61,.36,1); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; } [data-reveal="down"]{transform:translateY(-20px)} [data-reveal="left"]{transform:translateX(-26px)} [data-reveal="right"]{transform:translateX(26px)} [data-reveal="scale"]{transform:scale(.965)} [data-reveal="blur"]{transform:translateY(12px);filter:blur(9px)} [data-reveal="fade"]{transform:none} [data-reveal].revealed{opacity:1;transform:none;filter:none} /* reveal finished — drop the compositor hint so long pages don't hold layers */ [data-reveal].reveal-done{will-change:auto;transition-delay:0ms} /* SplitText / BlurText per-word — engine splits the node into .rv-w spans. Uses animation, not transition: these headings usually sit above the fold, and a transition needs a painted start frame to animate from — which the reveal observer can only give it by leaving the text invisible for a frame (a visible flash). An animation starts from its own 0% keyframe the moment the span is created, so it plays on page load with nothing to flash. */ [data-split-text]{opacity:1;transform:none;filter:none} [data-split-text] .rv-w{ display:inline-block; opacity:0; animation:stw-word .62s cubic-bezier(.22,.61,.36,1) forwards; animation-delay:var(--w-delay,0ms); } @keyframes stw-word{ from{opacity:0;transform:translateY(.5em);filter:blur(7px)} to{opacity:1;transform:none;filter:none} } /* below-the-fold headings wait for the reveal observer instead */ [data-split-text][data-split-defer] .rv-w{animation-play-state:paused} [data-split-text][data-split-defer].revealed .rv-w{animation-play-state:running} /* --- countup: CountUp / Counter --- */ [data-countup],[data-cart-count]{font-variant-numeric:tabular-nums} [data-cart-count].count-bump{animation:stw-bump .34s cubic-bezier(.34,1.56,.64,1)} @keyframes stw-bump{0%{transform:scale(1)}45%{transform:scale(1.42)}100%{transform:scale(1)}} /* --- shiny: ShinyText — monochrome sweep, no new colour token needed --- */ [data-shiny]{ background:linear-gradient(100deg,var(--ink) 42%,rgba(16,16,16,.28) 50%,var(--ink) 58%); background-size:230% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:stw-shine 3.6s linear infinite; } /* on dark/inverted surfaces (hero overlay, .kicker.light) */ [data-shiny="light"]{ background:linear-gradient(100deg,#fff 42%,rgba(255,255,255,.34) 50%,#fff 58%); background-size:230% 100%; -webkit-background-clip:text;background-clip:text; } @keyframes stw-shine{0%{background-position:230% 0}100%{background-position:-130% 0}} /* --- spotlight: SpotlightCard — cursor-following radial wash --- */ [data-spotlight]{position:relative} [data-spotlight]::after{ content:"";position:absolute;inset:0;border-radius:inherit; pointer-events:none;opacity:0;transition:opacity .38s ease; background:radial-gradient(210px circle at var(--sx,50%) var(--sy,50%), rgba(16,16,16,.085),rgba(16,16,16,0) 64%); } [data-spotlight].spot-on::after{opacity:1} /* --- glare: GlareHover — light sweeping across media/thumbnails --- */ [data-glare]{position:relative;overflow:hidden} [data-glare]::before{ content:"";position:absolute;top:-10%;left:-130%; width:62%;height:120%;z-index:2;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.44),transparent); transform:skewX(-18deg); transition:left .72s cubic-bezier(.22,.61,.36,1); } [data-glare]:hover::before,[data-glare]:focus-within::before{left:140%} /* --- starborder: StarBorder — travelling border light for CTAs. Paused while idle: a conic-gradient rotation repaints every frame, and the newsletter CTA that carries this sits on EVERY public page. It spins on hover/focus, or always with data-starborder="always". --- */ [data-starborder]{position:relative;isolation:isolate;overflow:hidden} [data-starborder]::before{ content:"";position:absolute;z-index:-1;inset:-140%; background:conic-gradient(from 0deg,transparent 0 72%,rgba(16,16,16,.55) 84%,transparent 92%); animation:stw-spin 3.8s linear infinite; animation-play-state:paused; } [data-starborder]:hover::before, [data-starborder]:focus-visible::before, [data-starborder="always"]::before{animation-play-state:running} [data-starborder]::after{ content:"";position:absolute;z-index:-1;inset:1px;border-radius:inherit; background:var(--paper,#fff); } [data-starborder="light"]::before{ background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.7) 84%,transparent 92%); } [data-starborder="light"]::after{background:var(--ink,#101010)} @keyframes stw-spin{to{transform:rotate(1turn)}} /* --- magnet: Magnet — engine writes --mx/--my, CSS only smooths it --- */ [data-magnet]{ display:inline-block; transform:translate(var(--mx,0px),var(--my,0px)); transition:transform .28s cubic-bezier(.22,.61,.36,1); } [data-magnet].magnet-active{transition:transform .08s linear} /* --- spark: ClickSpark — 8 rays fired from the click point --- */ .stw-spark{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;width:0;height:0} .stw-spark i{ position:absolute;left:0;top:0; width:12px;height:1.5px;border-radius:2px; background:var(--ink,#101010); transform-origin:0 50%; animation:stw-ray .46s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes stw-ray{ 0%{opacity:.85;transform:rotate(var(--ray)) translateX(3px) scaleX(.5)} 100%{opacity:0;transform:rotate(var(--ray)) translateX(26px) scaleX(.12)} } /* --- marquee: ScrollVelocity — infinite editorial ticker --- */ [data-marquee]{overflow:hidden;white-space:nowrap;display:flex} [data-marquee] .mq-run{ display:inline-flex;flex:0 0 auto;gap:var(--mq-gap,42px);padding-right:var(--mq-gap,42px); animation:stw-marquee var(--mq-dur,26s) linear infinite; will-change:transform; } [data-marquee="right"] .mq-run{animation-direction:reverse} [data-marquee]:hover .mq-run{animation-play-state:paused} @keyframes stw-marquee{to{transform:translateX(-100%)}} /* --- scramble: DecryptedText / ScrambledText — engine swaps textContent --- */ [data-scramble]{font-variant-ligatures:none} [data-scramble].scrambling{opacity:.92} /* --- reduced motion: every effect above collapses to its final state. Same specificity as the rules above but declared later, so no !important. */ @media (prefers-reduced-motion:reduce){ [data-reveal],[data-reveal].revealed{ opacity:1;transform:none;filter:none;transition:none;will-change:auto; } [data-split-text] .rv-w,[data-split-text].revealed .rv-w, [data-split-text][data-split-defer] .rv-w{ opacity:1;transform:none;filter:none;animation:none; } [data-shiny],[data-shiny="light"]{ animation:none;background:none;color:inherit;-webkit-text-fill-color:currentColor; } [data-spotlight]::after,[data-spotlight].spot-on::after{opacity:0;transition:none} [data-glare]::before,[data-glare]:hover::before{display:none} [data-starborder]::before{animation:none} [data-magnet],[data-magnet].magnet-active{transform:none;transition:none} [data-cart-count].count-bump{animation:none} [data-marquee] .mq-run{animation:none} .stw-spark{display:none} } /* v-motion-b — Motion Kit part 2 (ScrollStack · StaggeredMenu · TiltedCard). Same rules as the v-motion layer above: engine in js/common.js, data-* driven, no new !important, everything collapses under prefers-reduced-motion. Ported from: ScrollStack (data-scrollstack), StaggeredMenu (drawer nav, CSS-only — no partial edit needed), TiltedCard (data-tilt). */ /* --- scrollstack: ScrollStack — cards pin and shrink as the next one rides up. --ss-top is written at runtime from .site-header height (same approach as app.js syncMegaOffset) so it never goes stale when the header changes. --- */ [data-scrollstack]{display:block} [data-scrollstack] > *{ position:sticky; top:var(--ss-top,120px); margin-bottom:var(--ss-gap,26px); transform-origin:50% 0; transform:translateY(var(--ss-y,0px)) scale(var(--ss-s,1)); will-change:transform; } [data-scrollstack] > *:last-child{margin-bottom:0} /* the stacked card underneath dims slightly so the top card stays readable */ [data-scrollstack] > *::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none; border-radius:inherit;background:#fff;opacity:var(--ss-fade,0); transition:opacity .18s linear; } /* --- staggered drawer nav: StaggeredMenu. Pure CSS — the links ride in one after another when app.js adds .active. nth-child covers 10 nav items, which is more than $navCategories ships. --- */ .drawer .drawer-nav a{ opacity:0; transform:translateX(-16px); transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1); } .drawer.active .drawer-nav a{opacity:1;transform:none} .drawer.active .drawer-nav a:nth-child(1){transition-delay:.07s} .drawer.active .drawer-nav a:nth-child(2){transition-delay:.11s} .drawer.active .drawer-nav a:nth-child(3){transition-delay:.15s} .drawer.active .drawer-nav a:nth-child(4){transition-delay:.19s} .drawer.active .drawer-nav a:nth-child(5){transition-delay:.23s} .drawer.active .drawer-nav a:nth-child(6){transition-delay:.27s} .drawer.active .drawer-nav a:nth-child(7){transition-delay:.31s} .drawer.active .drawer-nav a:nth-child(8){transition-delay:.35s} .drawer.active .drawer-nav a:nth-child(9){transition-delay:.39s} .drawer.active .drawer-nav a:nth-child(n+10){transition-delay:.43s} .drawer .drawer-foot{ opacity:0;transform:translateY(10px); transition:opacity .34s ease .34s,transform .34s ease .34s; } .drawer.active .drawer-foot{opacity:1;transform:none} /* --- tilt: TiltedCard — engine writes --tx/--ty/--ts on pointermove --- */ [data-tilt]{ transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) scale(var(--ts,1)); transform-style:preserve-3d; transition:transform .38s cubic-bezier(.22,.61,.36,1); } [data-tilt].tilting{transition:transform .07s linear} @media (prefers-reduced-motion:reduce){ [data-scrollstack] > *{position:static;transform:none;will-change:auto} [data-scrollstack] > *::before{opacity:0} .drawer .drawer-nav a,.drawer.active .drawer-nav a, .drawer .drawer-foot,.drawer.active .drawer-foot{ opacity:1;transform:none;transition:none; } [data-tilt],[data-tilt].tilting{transform:none;transition:none} } /* --- masonry: Masonry — CSS columns instead of a JS layout engine, so it reflows on resize for free. Opt-in:
. Reading order becomes top-to-bottom per column, so only use it for galleries where order does not carry meaning. --- */ [data-masonry]{columns:var(--mc,3);column-gap:var(--mc-gap,18px)} [data-masonry] > *{break-inside:avoid;margin:0 0 var(--mc-gap,18px)} @media(max-width:900px){[data-masonry]{columns:2}} @media(max-width:640px){[data-masonry]{columns:1}} /* v-mobilenav — mobile bottom tab bar + "ALL MENU" bottom sheet, rendered by partials/mobile_nav.php on every public page. Hidden entirely above 768px: desktop/tablet keeps the header hamburger + off-canvas .drawer as-is. Lowest layer in the file, so shared selectors win without !important. */ .mnav,.msheet{display:none} @media(max-width:768px){ /* MENU now lives in the bottom bar — the header hamburger would be a second door to the same room, so it goes. .header-left [data-menu-open] is (0,2,0) and beats .icon-btn{display:grid} without !important. */ .site-header .header-left [data-menu-open]{display:none} /* border-box is global, so min-height:100vh already absorbs this padding — no phantom 64px of scroll on short pages. */ body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))} .toast{bottom:calc(78px + env(safe-area-inset-bottom,0px))} /* --- bottom tab bar --- */ .mnav{ display:grid;grid-template-columns:repeat(5,1fr);align-items:center; position:fixed;left:0;right:0;bottom:0;z-index:70; padding-bottom:env(safe-area-inset-bottom,0px); background:var(--paper);border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(0,0,0,.05); } .mnav-item,.mnav-fab{ display:grid;justify-items:center;align-content:center;gap:4px; height:62px;padding:0;border:0;background:transparent; color:var(--muted);font:inherit;cursor:pointer; } .mnav-ico{position:relative;display:block;font-size:19px;line-height:1} .mnav-label{font-size:9px;line-height:1;letter-spacing:.02em} .mnav-item.is-active{color:var(--ink)} .mnav-item.is-active .mnav-label{font-weight:500} .mnav-ico sup{ position:absolute;top:-6px;right:-10px;min-width:15px;height:15px;padding:0 3px; border-radius:999px;background:var(--ink);color:#fff; display:grid;place-items:center;font-size:8px;line-height:1; } .mnav-fab{color:var(--ink)} .mnav-fab-dot{ width:48px;height:48px;margin-top:-24px;border-radius:50%; background:var(--ink);color:#fff;border:3px solid var(--paper); display:grid;place-items:center;font-size:19px; box-shadow:0 10px 24px rgba(16,16,16,.26); transition:transform .2s cubic-bezier(.22,.61,.36,1); } .mnav-fab[aria-expanded="true"] .mnav-fab-dot{transform:rotate(90deg) scale(.94)} .mnav-fab .mnav-label{font-weight:500;letter-spacing:.1em} /* --- "ALL MENU" bottom sheet --- */ .msheet{ display:flex;flex-direction:column; position:fixed;left:0;right:0;bottom:0;z-index:92; max-height:86vh;background:var(--paper); border-radius:22px 22px 0 0; box-shadow:0 -20px 56px rgba(0,0,0,.2); padding-bottom:env(safe-area-inset-bottom,0px); transform:translateY(102%); transition:transform .3s cubic-bezier(.22,.61,.36,1); } .msheet.active{transform:none} /* touch-action:none so the drag-to-dismiss handler in app.js owns the gesture instead of the browser scrolling .msheet-body underneath it */ .msheet-grip{display:grid;place-items:center;padding:10px 0 4px;touch-action:none} .msheet-grip span{display:block;width:42px;height:4px;border-radius:999px;background:#dcdcdc} .msheet-head{display:flex;align-items:center;gap:12px;padding:8px 18px 16px;touch-action:none} .msheet-badge{ flex:0 0 auto;width:44px;height:44px;border-radius:14px; background:var(--ink);color:#fff;display:grid;place-items:center;font-size:18px; } .msheet-title{flex:1 1 auto;min-width:0;display:grid;gap:2px} .msheet-title strong{font-size:16px;font-weight:500;letter-spacing:-.025em} .msheet-title>span{font-size:9px;color:var(--muted);letter-spacing:.14em} .msheet-x{ flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%; background:#f2f2f2;color:var(--ink);display:grid;place-items:center; font-size:13px;cursor:pointer; } .msheet-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 16px 20px} .msheet-sec+.msheet-sec{margin-top:20px} .msheet-sec h4{ position:relative;display:flex;align-items:center;gap:7px; margin:0 0 10px;padding-left:10px; font-size:13px;font-weight:500;letter-spacing:-.02em; } .msheet-sec h4:before{ content:'';position:absolute;left:0;top:50%;transform:translateY(-50%); width:3px;height:14px;border-radius:2px;background:var(--ink); } .msheet-sec h4 span{font-size:9px;font-weight:400;color:var(--muted);letter-spacing:.14em} .msheet-sec h4 span:before{content:'\00b7\00a0'} /* --- tiles --- */ .mtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .mtile{ display:grid;justify-items:center;align-content:start;gap:7px;text-align:center; /* min-height keeps a row level when one Thai label wraps to two lines — otherwise neighbouring tiles ended up visibly different heights. */ min-height:104px; padding:14px 5px 12px;border:1px solid var(--line);border-radius:16px; background:var(--paper); transition:transform .16s ease,background .16s ease,border-color .16s ease; } .mtile:active{transform:scale(.955)} /* font-size/color are set explicitly here because `.mtile > span` (the EN label rule below) used to match this element too — the icon inherited 7px muted grey and all but vanished. The label now carries .mtile-en. */ .mtile-ico{ width:40px;height:40px;border-radius:13px;background:#f2f2f2; display:grid;place-items:center; font-size:19px;line-height:1;letter-spacing:0;color:var(--ink); } .mtile strong{font-size:11px;font-weight:400;line-height:1.3} .mtile-en{font-size:8px;line-height:1;color:var(--muted);letter-spacing:.1em} .mtile.is-active{background:var(--ink);border-color:var(--ink);color:#fff} /* The icon colour has to be restated: without it the glyph inherited the tile's white text colour and disappeared into the white chip. */ .mtile.is-active .mtile-ico{background:#fff;color:var(--ink)} .mtile.is-active .mtile-en{color:rgba(255,255,255,.62)} } @media(max-width:360px){ .mtiles{gap:6px} .mtile{min-height:92px;padding:12px 2px 10px;border-radius:14px;gap:6px} .mtile-ico{width:34px;height:34px;font-size:16px;border-radius:11px} .mtile strong{font-size:10px} } @media (max-width:768px) and (prefers-reduced-motion:reduce){ .msheet,.mtile,.mnav-fab-dot{transition:none} .mtile:active{transform:none} } /* v-newsbtn — newsletter CTA went white-on-white. StarBorder's ::after paints an inner fill so the conic-gradient only shows as a 1px ring; the default fill is --paper, which sat on top of .btn's black background (isolation creates a stacking context, so a z-index:-1 pseudo still covers the host's own background) and left white text on white. .btn is a DARK surface, so it takes the "light" variant — common.js now tags it that way. These rules pin the CTA's colours regardless of which variant it carries, so a stale cached common.js can't bring the invisible button back. */ .newsletter-form .btn[data-starborder]{color:#fff;background:var(--ink);border-color:var(--ink)} .newsletter-form .btn[data-starborder]::after{background:var(--ink)} .newsletter-form .btn[data-starborder]::before{ background:conic-gradient(from 0deg,transparent 0 72%,rgba(255,255,255,.7) 84%,transparent 92%); } .newsletter-form .btn[data-starborder] i{color:inherit} /* v-account — /account area redesign. The old shell was an admin console dropped into the public site: a pill tab row on --soft (an ADMIN token), 600-weight labels, boxed white cards with 1px borders per block, and icon+chevron list rows. None of that vocabulary exists anywhere else here. Rebuilt on the site's own language — .kicker, weight-500 headings with negative letter-spacing and clamp(), hairline rules instead of card borders, and the same tile treatment as the mobile menu (v-mobilenav). Lowest layer, so it beats the v10 .account-* rules without !important. */ /* --- masthead ------------------------------------------------------- */ .acc-head{padding:44px 0 0} .acc-head .container,.acc-tabs-wrap .container,.acc-body .container{width:min(calc(100% - 48px),1180px)} .acc-id{display:flex;align-items:center;gap:18px;margin-top:15px;padding-bottom:26px} .acc-av{ flex:0 0 auto;width:66px;height:66px;border-radius:50%;overflow:hidden; display:grid;place-items:center;background:var(--ink);color:#fff; font-size:25px;font-weight:500;letter-spacing:-.03em; } .acc-av img{width:100%;height:100%;object-fit:cover} .acc-id-copy{flex:1 1 auto;min-width:0} .acc-id-copy h1{margin:0;font-size:clamp(30px,4.4vw,52px);font-weight:500;line-height:1;letter-spacing:-.05em} .acc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 14px;margin:9px 0 0;font-size:11.5px;color:var(--muted)} .acc-meta span{display:inline-flex;align-items:center;gap:5px} .acc-out{ flex:0 0 auto;display:inline-flex;align-items:center;gap:7px; height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px; font-size:11.5px;color:var(--muted);transition:border-color .16s,color .16s; } .acc-out:hover{border-color:var(--ink);color:var(--ink)} /* --- section tabs: the header's underline nav, not a pill bar --------- */ .acc-tabs-wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .acc-tabs{display:flex;gap:28px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity} .acc-tabs::-webkit-scrollbar{display:none} .acc-tab{ position:relative;flex:0 0 auto;scroll-snap-align:center; display:inline-flex;align-items:center;gap:7px;padding:15px 0; font-size:12px;color:var(--muted);white-space:nowrap;transition:color .16s; } .acc-tab i{font-size:13px} .acc-tab em{font-style:normal;font-size:8.5px;letter-spacing:.14em;opacity:.55} .acc-tab:after{content:'';position:absolute;left:0;right:100%;bottom:-1px;height:2px;background:var(--ink);transition:.22s} .acc-tab:hover{color:var(--ink)} .acc-tab:hover:after,.acc-tab.is-active:after{right:0} .acc-tab.is-active{color:var(--ink);font-weight:500} /* --- body ------------------------------------------------------------ */ .acc-body{padding:34px 0 72px} .acc-sec{margin-top:46px} .acc-sec-head{ display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap; margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid var(--line); } .acc-sec-head h2{margin:7px 0 0;font-size:clamp(21px,2.4vw,30px);font-weight:500;line-height:1;letter-spacing:-.04em} .acc-more{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);transition:color .16s} .acc-more:hover{color:var(--ink)} /* --- metric strip: hairline dividers, no cards ----------------------- */ .acc-metrics{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .acc-metrics .metric{padding:26px 18px;text-align:center;color:inherit;border-left:1px solid var(--line);transition:background .16s} .acc-metrics .metric:first-child{border-left:0} .acc-metrics a.metric:hover{background:#fafafa} .acc-metrics .metric strong{display:block;font-size:clamp(28px,3.8vw,46px);font-weight:300;line-height:1;letter-spacing:-.05em} .acc-metrics .metric span{display:block;margin-top:10px;font-size:12px} .acc-metrics .metric em{display:block;margin-top:4px;font-style:normal;font-size:8.5px;letter-spacing:.14em;color:var(--muted)} /* --- list rows ------------------------------------------------------- */ .acc-rows{display:grid} .acc-row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto auto 16px; align-items:center;gap:16px;padding:17px 0; border-bottom:1px solid var(--line);color:inherit; transition:padding-left .18s,padding-right .18s; } .acc-row:hover{padding-left:9px;padding-right:9px} .acc-row-no{font-size:13px;font-weight:500;letter-spacing:.02em} .acc-row-meta{font-size:11.5px;color:var(--muted)} .acc-row-amt{font-size:14px;font-weight:500;letter-spacing:-.02em;text-align:right} .acc-row>i{justify-self:end;font-size:13px;color:var(--muted);transition:color .16s} .acc-row:hover>i{color:var(--ink)} .acc-pill{ display:inline-flex;align-items:center;gap:5px;padding:4px 10px; border:1px solid var(--line);border-radius:999px; font-size:9.5px;letter-spacing:.06em;color:var(--muted);white-space:nowrap; } .acc-pill.ok{border-color:var(--ink);color:var(--ink)} /* --- empty state: type, not a boxed icon ----------------------------- */ .acc-empty{padding:54px 0 58px;text-align:center} .acc-empty strong{display:block;font-size:clamp(20px,2.6vw,28px);font-weight:500;letter-spacing:-.04em} .acc-empty p{margin:9px 0 22px;font-size:12.5px;color:var(--muted)} /* --- manage tiles: same vocabulary as the mobile menu ---------------- */ .acc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:22px} .acc-tile{ position:relative;display:grid;align-content:start;gap:9px; padding:20px 18px 48px;border:1px solid var(--line);border-radius:var(--r); color:inherit;transition:background .18s,border-color .18s,color .18s; } .acc-tile>i:first-child{font-size:20px} .acc-tile strong{font-size:13.5px;font-weight:500;letter-spacing:-.02em} .acc-tile>span{font-size:9.5px;letter-spacing:.06em;color:var(--muted);transition:color .18s} .acc-tile .arr{position:absolute;right:18px;bottom:18px;font-size:13px;color:var(--muted);transition:transform .18s,color .18s} .acc-tile:hover{background:var(--ink);border-color:var(--ink);color:#fff} .acc-tile:hover>span{color:rgba(255,255,255,.6)} .acc-tile:hover .arr{color:#fff;transform:translateX(4px)} /* --- flatten the v10 shell the secondary account pages still use ----- */ .account-wrap{width:min(calc(100% - 48px),1180px);max-width:none;margin:0 auto;padding:34px 0 72px} .account-section{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0;margin-bottom:0} .account-section:first-child{border-top:0} .account-section-head h2{font-size:clamp(19px,2.2vw,26px);font-weight:500;letter-spacing:-.04em} .account-section-head{padding-bottom:14px;border-bottom:1px solid var(--line)} .account-empty{padding:54px 0} .account-empty i{display:none} .account-empty .msg{font-size:clamp(19px,2.4vw,26px);letter-spacing:-.04em} .account-quickaction{padding:16px 0} .account-quickaction>i:first-child{font-size:16px} .account-btn{min-height:42px;padding:0 20px} @media(max-width:900px){ .acc-tiles{grid-template-columns:repeat(2,1fr)} .acc-row{grid-template-columns:minmax(0,1fr) auto;gap:7px 14px} .acc-row-meta{grid-column:1;grid-row:2} .acc-pill{grid-column:2;grid-row:2;justify-self:end} .acc-row-amt{grid-column:2;grid-row:1} .acc-row>i{display:none} } @media(max-width:640px){ .acc-head{padding:28px 0 0} .acc-head .container,.acc-tabs-wrap .container,.acc-body .container{width:min(calc(100% - 24px),1180px)} .acc-id{gap:14px;padding-bottom:20px} .acc-av{width:52px;height:52px;font-size:21px} .acc-out{width:38px;padding:0;justify-content:center;font-size:0;gap:0} .acc-out i{font-size:15px} .acc-tabs{gap:20px} .acc-tab em{display:none} .acc-body{padding:26px 0 56px} .acc-sec{margin-top:36px} .acc-metrics .metric{padding:18px 8px} .acc-metrics .metric span{margin-top:7px;font-size:10.5px} .acc-metrics .metric em{display:none} .account-wrap{width:min(calc(100% - 24px),1180px)} /* tiles become rule-separated rows — cards this narrow read as noise */ .acc-tiles{grid-template-columns:1fr;gap:0;margin-top:14px} .acc-tile{ grid-template-columns:24px minmax(0,1fr);align-items:center;gap:3px 14px; padding:15px 0;border:0;border-bottom:1px solid var(--line);border-radius:0; } .acc-tile>i:first-child{grid-row:1/3;font-size:17px;color:var(--muted)} .acc-tile strong,.acc-tile>span{grid-column:2} .acc-tile .arr{right:0;bottom:auto;top:50%;transform:translateY(-50%)} .acc-tile:hover{background:transparent;border-color:var(--line);color:inherit} .acc-tile:hover>span{color:var(--muted)} .acc-tile:hover .arr{color:var(--muted);transform:translateY(-50%)} } @media (prefers-reduced-motion:reduce){ .acc-tab:after,.acc-row,.acc-tile,.acc-tile .arr,.acc-out,.acc-more,.acc-metrics .metric{transition:none} .acc-row:hover{padding-left:0;padding-right:0} .acc-tile:hover .arr{transform:none} } /* v-account-b — 4-up metric strip (/account/orders) + spacing for the blocks that follow a .acc-sec-head. Kept in its own comment block rather than edited into v-account above, per the layer rules. */ .acc-metrics-4{grid-template-columns:repeat(4,1fr)} .acc-sec-head+.acc-metrics, .acc-sec-head+.card-grid, .acc-sec-head+.ord-hist-list, .acc-metrics+.ord-hist-list, .acc-metrics+.account-empty{margin-top:0} .acc-metrics{margin-bottom:24px} .acc-body .card-grid{margin-top:0} @media(max-width:900px){ .acc-metrics-4{grid-template-columns:repeat(2,1fr)} .acc-metrics-4 .metric:nth-child(odd){border-left:0} .acc-metrics-4 .metric:nth-child(n+3){border-top:1px solid var(--line)} } /* v-herofix — the hero READ button rendered as a full-width white bar across the whole slide. Cause: .hero-copy is a flex column and never set align-items, so every child inherited `stretch`. h1/p hid it behind their own max-width; the button and the kicker had none, so they spanned the container. Also clamps the headline: a 3-line Thai title at 68px overflowed the fixed-height slide and .hero-slider{overflow:hidden} cut it in half. */ .hero-copy{align-items:flex-start;padding-top:120px} .hero-copy>*{max-width:100%} .hero-copy .btn{align-self:flex-start;width:auto;min-width:0;padding:0 24px;gap:9px} .hero-copy .btn i{font-size:14px} .hero-copy h1{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; overflow:hidden;margin-bottom:16px; } .hero-copy p{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; overflow:hidden; } /* Slider controls: circles that match the site's pill language instead of 2px-radius boxes, and a dot row that reads as one control. */ .hero-control{ width:40px;height:40px;border-radius:50%; border:1px solid rgba(255,255,255,.32);background:rgba(0,0,0,.22); font-size:15px;transition:background .16s,border-color .16s,color .16s; } .hero-control:hover{background:#fff;border-color:#fff;color:var(--ink)} .hero-nav{gap:8px} .hero-dots{gap:9px} .hero-dots button{ width:7px;height:7px;background:rgba(255,255,255,.4); transition:width .2s ease,background .2s ease; } .hero-dots button.active{width:26px;height:7px;border-radius:999px;background:#fff} @media(max-width:1024px){.hero-copy{padding-top:100px}} @media(max-width:768px){ .hero-copy{padding-top:84px} .hero-copy h1{-webkit-line-clamp:4} .hero-control{width:36px;height:36px;font-size:13px} } @media(max-width:640px){ .hero-copy{padding-top:74px} .hero-copy p{-webkit-line-clamp:2} } @media (prefers-reduced-motion:reduce){ .hero-control,.hero-dots button{transition:none} } /* v-pblock — product block inside an article body (partials/blocks/product.php). The block used to render a grey placeholder card with inline styles; now it is a real product link, styled in the article's own editorial language rather than the admin's --soft box it inherited before. */ .pblock{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px; margin:34px 0;padding:16px;border:1px solid var(--line);border-radius:var(--r); color:inherit;transition:border-color .18s,background .18s; } .pblock:hover{border-color:var(--ink);background:#fafafa} .pblock-media{width:84px;height:84px;border-radius:10px;overflow:hidden;flex:0 0 auto} .pblock-media img{width:100%;height:100%;object-fit:cover} .pblock-body{display:grid;gap:5px;min-width:0} .pblock-kicker{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted)} .pblock-name{font-size:16px;font-weight:500;letter-spacing:-.025em;line-height:1.25} .pblock-price{font-size:13px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .pblock-price s{color:var(--muted);font-size:11.5px} .pblock-price em{font-style:normal;font-size:9.5px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 8px} .pblock-arrow{font-size:15px;color:var(--muted);transition:transform .18s,color .18s} .pblock:hover .pblock-arrow{color:var(--ink);transform:translateX(4px)} @media(max-width:640px){ .pblock{grid-template-columns:auto 1fr;gap:13px;padding:13px} .pblock-media{width:64px;height:64px} .pblock-name{font-size:14px} .pblock-arrow{display:none} } @media (prefers-reduced-motion:reduce){ .pblock,.pblock-arrow{transition:none} .pblock:hover .pblock-arrow{transform:none} } /* v-news — /news, /news-world and /news/category/{slug}. The page used to be the old sub-brand layout, styled inline for a DARK theme — rgba(0,0,0,.5) chips behind var(--mu) text. v-tokenfix remapped the old token names to monochrome but cannot rewrite hardcoded rgba(), so those chips rendered as dark grey blocks on today's light page. Rebuilt as a real editorial front page — masthead, lead story, numbered latest rows, rail — entirely on this project's tokens and type scale. */ /* --- masthead ------------------------------------------------------- */ .nhead{padding:46px 0 0} .nhead-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .nhead-date{font-size:10px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase} .nhead h1{ margin:16px 0 0;font-size:clamp(44px,7vw,86px);font-weight:500; line-height:.94;letter-spacing:-.055em; } .nhead-deck{max-width:620px;margin:14px 0 0;font-size:14px;font-weight:300;color:var(--muted);line-height:1.7} /* Filter row — scrolls sideways instead of wrapping into a wall of pills. */ .nfilter{ display:flex;gap:8px;margin:24px 0 0;padding:0 0 24px; overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity; } .nfilter::-webkit-scrollbar{display:none} .nfilter-item{ flex:0 0 auto;scroll-snap-align:start; display:inline-flex;align-items:center;height:34px;padding:0 15px; border:1px solid var(--line);border-radius:999px; font-size:11.5px;color:var(--muted);white-space:nowrap; transition:border-color .16s,color .16s,background .16s; } .nfilter-item:hover{border-color:var(--ink);color:var(--ink)} .nfilter-item.is-active{background:var(--ink);border-color:var(--ink);color:#fff} /* --- news card grid -------------------------------------------------- Was a lead story + 3 runners + a numbered list of rows below. Reference layout for this rebuild uses one uniform grid of cards instead — no separate hero treatment — so this replaces the .nlead / .nrunner / .nrow families wholesale rather than adding yet another layer on top of them. (⚠️ the selector names are written without their trailing wildcard on purpose: an asterisk followed by a slash closes a comment early — that typo used to end this comment right here and hand the next rule to the parser as garbage, which is why .nbody silently lost its padding.) */ .nbody{padding:52px 0 74px} .news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 20px} .news-card{display:block;color:inherit} .news-card-media{ position:relative;display:block;overflow:hidden; border-radius:var(--r);background:#eee;aspect-ratio:4/5; } .news-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s cubic-bezier(.22,.61,.36,1)} .news-card:hover .news-card-media img{transform:scale(1.03)} .news-card-badge{ position:absolute;left:10px;top:10px;z-index:1; padding:5px 11px;border-radius:999px;color:#fff; font-size:9.5px;font-weight:500;letter-spacing:.1em; } .news-card-body{padding:14px 1px 0} .news-card-body h3{ margin:0 0 7px;font-size:15.5px;font-weight:500;line-height:1.35;letter-spacing:-.02em; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .news-card-body p{ margin:0 0 9px;font-size:12px;font-weight:300;color:var(--muted);line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .news-card-body small{display:block;font-size:10.5px;color:var(--muted)} /* Small "external link" marker on a card's media. */ .story-ext{ position:absolute;top:9px;right:9px;z-index:2; width:25px;height:25px;border-radius:50%; background:rgba(255,255,255,.92);color:var(--ink); display:grid;place-items:center;font-size:10.5px; } .news-count{ flex:0 0 auto;align-self:center; font-size:10px;letter-spacing:.1em;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap; } /* --- rail ----------------------------------------------------------- */ .news-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:48px;align-items:start} .news-sidebar{display:flex;flex-direction:column;gap:30px;position:sticky;top:96px} .nside{border-top:1px solid var(--line);padding-top:16px} .nside .kicker{margin-bottom:13px} .nmost{list-style:none;margin:0;padding:0;display:grid} .nmost li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:11px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)} .nmost li span{font-size:17px;font-weight:300;color:#c8c8c8;letter-spacing:-.03em;line-height:1} .nmost li a{font-size:12.5px;line-height:1.5;color:var(--ink)} .nmost li a:hover{text-decoration:underline;text-underline-offset:3px} .nside-list{display:grid} .nside-list a{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 0;border-bottom:1px solid var(--line); font-size:12.5px;color:var(--ink);transition:padding-left .16s; } .nside-list a:hover{padding-left:7px} .nside-list a b{font-size:10.5px;font-weight:400;color:var(--muted)} .nside-list a.is-active{font-weight:500} .nside-list a.is-active b{color:var(--ink)} .pagination .pg-gap{display:grid;place-items:center;width:22px;height:38px;color:var(--muted);font-size:13px} @media(max-width:1024px){ .news-layout{grid-template-columns:1fr;gap:44px} .news-sidebar{position:static;flex-direction:row;flex-wrap:wrap;gap:26px} .news-sidebar > *{flex:1 1 250px} .news-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:768px){ .news-grid{grid-template-columns:repeat(2,1fr);gap:22px 14px} } @media(max-width:640px){ .nhead{padding:30px 0 0} .nfilter{margin-top:18px;padding-bottom:18px} .nfilter-item{height:31px;padding:0 13px;font-size:11px} .nbody{padding:36px 0 56px} .news-card-body h3{font-size:14px} .news-sidebar{flex-direction:column} } @media(max-width:420px){ .news-grid{grid-template-columns:1fr;gap:18px} } @media (prefers-reduced-motion:reduce){ .nfilter-item,.nside-list a,.news-card-media img{transition:none} .news-card:hover .news-card-media img{transform:none} .nside-list a:hover{padding-left:0} } /* v-bannerslot — banner_slot() in Helpers/functions.php has always emitted .banner-slot / .banner-slot-empty markup, but no stylesheet ever defined those classes. The "YOUR AD HERE" placeholder therefore rendered as bare unstyled text on every page that calls the helper (visible on /news). Styled here in the site's own language so it reads as a deliberate empty ad slot rather than broken markup. */ .banner-slot{display:block;color:inherit} .banner-slot img{border-radius:var(--r)} .banner-slot-label{ margin-top:6px;font-size:8.5px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase; } .banner-slot-empty-in{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; padding:22px 18px;text-align:center; border:1px dashed var(--line);border-radius:var(--r); color:var(--muted);transition:border-color .18s,color .18s; } .banner-slot-empty:hover .banner-slot-empty-in{border-color:var(--ink);color:var(--ink)} .banner-slot-empty-in i{font-size:20px;opacity:.5} .banner-slot-title{font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--ink)} .banner-slot-sub{font-size:10px;line-height:1.5} .banner-slot-cta{ margin-top:4px;font-size:10.5px;color:var(--ink); border-bottom:1px solid var(--line);padding-bottom:2px; } @media (prefers-reduced-motion:reduce){ .banner-slot-empty-in{transition:none} } /* v-newsarticle — /news/{slug} and /news-world/{slug}. The view (public/news/show.php) has always rendered .na-* markup, but NOT ONE of those ~40 classes was ever defined in any stylesheet — the article page shipped completely unstyled: a bare column of text with full-bleed images. The markup itself is sound (breadcrumb → header grid → blocks → share → rail) and drives real logic (YouTube playlists, galleries, banner blocks), so it is left alone and dressed here instead of rewritten. Typography follows the existing article page: weight 500 headings, negative letter-spacing, body line-height 1.86. */ .news-article-wrap{width:min(calc(100% - 48px),var(--max));margin:0 auto;padding:36px 0 76px} .news-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start} .news-article-main{min-width:0} /* --- header ---------------------------------------------------------- */ .na-header-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center;margin-bottom:36px} .na-header-text{min-width:0} .na-breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:16px} .na-breadcrumb a{color:var(--muted)} .na-breadcrumb a:hover{color:var(--ink)} .na-breadcrumb i{font-size:9px;opacity:.5} /* The badge carries an inline background from the category's colour. Keep the shape neutral so a bright category colour still reads on the light page. */ .na-category-badge{ display:inline-flex;align-items:center;height:22px;padding:0 10px; border-radius:999px;color:#fff; font-size:9px;font-weight:600;letter-spacing:.12em; } .na-title{ margin:14px 0 0;font-size:clamp(30px,4.4vw,58px);font-weight:500; line-height:1.02;letter-spacing:-.05em; } .na-excerpt{margin:16px 0 0;max-width:620px;font-size:15px;font-weight:300;color:var(--muted);line-height:1.75} .na-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)} .na-meta span{display:inline-flex;align-items:center;gap:6px} .na-header-cover{border-radius:var(--r);overflow:hidden;background:#eee;aspect-ratio:4/5} .na-header-cover img{width:100%;height:100%;object-fit:cover} /* --- body ------------------------------------------------------------ */ .na-content{max-width:720px;font-size:16px;line-height:1.86;color:var(--ink)} .na-content p{margin:0 0 22px} .na-content a{text-decoration:underline;text-underline-offset:3px} .na-content img{border-radius:var(--r);margin:26px 0} .na-content h2,.na-content h3{font-weight:500;letter-spacing:-.03em;line-height:1.2} .na-content h2{font-size:clamp(21px,2.4vw,30px);margin:36px 0 14px} .na-content h3{font-size:19px;margin:30px 0 12px} .na-content blockquote{ margin:30px 0;padding:4px 0 4px 22px;border-left:2px solid var(--ink); font-size:19px;font-weight:300;line-height:1.6;letter-spacing:-.02em; } .na-content ul,.na-content ol{margin:0 0 22px;padding-left:22px} .na-content li{margin-bottom:8px} .na-content figure{margin:28px 0} .na-content figcaption{margin-top:9px;font-size:11.5px;color:var(--muted)} .na-youtube-wrap{margin:28px 0} /* --- gallery --------------------------------------------------------- */ .na-gallery{margin:36px 0} .na-gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px} .na-gallery-item{ position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden; background-size:cover;background-position:center;background-color:#eee; cursor:zoom-in; } .na-gallery-caption{ position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px; background:linear-gradient(transparent,rgba(0,0,0,.72)); color:#fff;font-size:10.5px;line-height:1.5; } /* --- tags ------------------------------------------------------------ */ .na-tags{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line)} .na-tags-label{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted)} .na-tag{ display:inline-flex;align-items:center;height:28px;padding:0 12px; border:1px solid var(--line);border-radius:999px; font-size:11px;color:var(--muted); } /* --- share ----------------------------------------------------------- */ .na-share{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line)} .na-share-label{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted)} .na-share-buttons{display:flex;gap:8px;flex-wrap:wrap} .na-share-btn{ display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 15px; border:1px solid var(--line);border-radius:999px; font-size:11.5px;color:var(--muted); transition:border-color .16s,color .16s; } /* Monochrome on purpose — brand colours per network would be the only saturated thing on the page. */ .na-share-btn:hover{border-color:var(--ink);color:var(--ink)} /* --- rail ------------------------------------------------------------ */ .news-article-sidebar{min-width:0} .na-sidebar-sticky{position:sticky;top:96px;display:flex;flex-direction:column;gap:30px} .na-section-title{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--muted);margin-bottom:13px;text-transform:uppercase} .na-related{border-top:1px solid var(--line);padding-top:16px} .na-related-list{display:grid} .na-related-item{ display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center; padding:12px 0;border-bottom:1px solid var(--line);color:inherit; transition:padding-left .16s; } .na-related-item:hover{padding-left:6px} .na-related-thumb{aspect-ratio:4/5;border-radius:9px;background-size:cover;background-position:center;background-color:#eee} .na-related-title{font-size:12.5px;font-weight:400;line-height:1.45;letter-spacing:-.01em} .na-related-meta{margin-top:5px;font-size:10px;color:var(--muted)} /* --- YouTube playlist queue panel (styles for it are emitted inline by the view; these only fix the pieces that referenced the old dark theme) --- */ .na-pl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .na-pl-head .t{font-weight:500;letter-spacing:-.01em} @media(max-width:1024px){ .news-article-grid{grid-template-columns:1fr;gap:44px} .na-sidebar-sticky{position:static;flex-direction:row;flex-wrap:wrap;gap:26px} .na-sidebar-sticky > *{flex:1 1 250px} .na-header-grid{grid-template-columns:1fr;gap:24px} .na-header-cover{aspect-ratio:16/9} } @media(max-width:640px){ .news-article-wrap{width:min(calc(100% - 24px),var(--max));padding:24px 0 56px} .na-content{font-size:15px} .na-content blockquote{font-size:17px;padding-left:16px} .na-meta{gap:12px;font-size:10.5px} .na-share{flex-direction:column;align-items:flex-start;gap:10px} .na-sidebar-sticky{flex-direction:column} } @media (prefers-reduced-motion:reduce){ .na-share-btn,.na-related-item{transition:none} .na-related-item:hover{padding-left:0} } /* v-newsarticle-b — the four .na-* classes the first pass missed. .na-share-{fb,tw,line} were per-network brand-colour hooks in the old theme; here they stay monochrome and only carry the icon colour, so the share row reads as one control instead of three coloured buttons. */ .na-related-info{min-width:0} .na-share-fb i,.na-share-tw i,.na-share-line i{font-size:13px} .na-share-fb:hover,.na-share-tw:hover,.na-share-line:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* v-a11y — keyboard + screen-reader baseline. Three gaps this closes: 1. FOCUS. The whole stylesheet had exactly one :focus-visible rule (the StarBorder button in v-motion) while 4 rules here and 14 inline styles in the section views set outline:none/0 with nothing put back. Tabbing the site gave no indication of where you were — WCAG 2.4.7 (AA) and 2.4.13 Focus Appearance (WCAG 2.2 AA) both fail on that. The ring below is drawn with outline + outline-offset rather than box-shadow so it survives on elements that already own their box-shadow (.story, .metric, StarBorder), and :focus-visible means mouse users never see it. Declared last so it beats the earlier outline:0 rules on equal specificity — no !important, same trick the v-motion layer uses. 2. SKIP LINK. Neither layout had one, so a keyboard user re-tabbed the whole header + subnav + mega menu on every page (WCAG 2.4.1). layouts/public.php and layouts/admin.php now render one as the first focusable element; it is off-screen until focused. 3. .sr-only. Referenced by the OTP inputs, the newsletter field and the admin topbar search to give controls an accessible name without changing the visual design. It never existed in either stylesheet. */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* Specificity, not !important. The section views declare their own `outline:none` inside