/*
Theme Name: Tightent
Theme URI: https://tightent.shop
Author: Tightent
Description: Custom WordPress block theme for tightent.shop — Thai event equipment manufacturer. Built from the Figma source of truth; WooCommerce ready.
Version: 1.61.0
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tightent
Tags: block-theme, full-site-editing, e-commerce, thai
*/
/* -------------------------------------------------------------------------
* Everything below is what theme.json cannot express.
* Tokens live in theme.json; this file only holds effects, layout behaviour
* and the two responsive rules the design needs. Keep it short.
* ---------------------------------------------------------------------- */
:root {
--tt-radius-sm: var(--wp--custom--radius--sm);
--tt-radius-md: var(--wp--custom--radius--md);
--tt-radius-lg: var(--wp--custom--radius--lg);
--tt-control: var(--wp--custom--control--height);
--tt-glass-bg: var(--wp--custom--glass--background);
--tt-glass-border: var(--wp--custom--glass--border);
--tt-glass-blur: var(--wp--custom--glass--blur);
}
/* --- Focus: one visible ring everywhere, since the design defines none. --- */
:where(a, button, .wp-block-button__link, summary, input, select, textarea):focus-visible {
outline: 2px solid var(--wp--preset--color--accent-blue);
outline-offset: 2px;
}
/* --- Buttons -------------------------------------------------------------- */
.wp-block-button__link {
min-height: var(--tt-control);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: filter .15s ease;
}
.wp-block-button__link:hover { filter: brightness(.92); }
.wp-block-button.is-style-line .wp-block-button__link {
background-color: var(--wp--preset--color--line-green);
color: var(--wp--preset--color--base);
}
.wp-block-button.is-style-gold .wp-block-button__link {
background-color: var(--wp--preset--color--brand-gold);
color: var(--wp--preset--color--brand-blue);
}
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
color: var(--wp--preset--color--brand-blue);
box-shadow: inset 0 0 0 1px currentColor;
}
.wp-block-button.is-style-glass .wp-block-button__link {
background-color: var(--tt-glass-bg);
color: var(--wp--preset--color--base);
box-shadow: inset 0 0 0 .5px var(--tt-glass-border);
backdrop-filter: blur(var(--tt-glass-blur));
-webkit-backdrop-filter: blur(var(--tt-glass-blur));
}
.wp-block-button.is-style-compact .wp-block-button__link {
min-height: 32px;
padding: 4px 16px;
border-radius: var(--wp--custom--radius--pill);
}
/* The LINE mark, injected so patterns stay free of inline SVG. */
.wp-block-button.is-style-line .wp-block-button__link::before,
.has-line-mark .wp-block-button__link::before,
.has-facebook-mark .wp-block-button__link::before {
content: "";
inline-size: 26px;
block-size: 26px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: var(--tt-line-icon) center / contain no-repeat;
mask: var(--tt-line-icon) center / contain no-repeat;
}
/*
* LINE is 26px (owner, 1 Oct 2026): at 20 the cut-out letters closed up and
* the mark read as a plain speech bubble. The gap grows with it (10 -> 13).
*/
.wp-block-button.is-style-line .wp-block-button__link,
.has-line-mark .wp-block-button__link { gap: 13px; }
/* Official glyphs (simple-icons, CC0), 1 Oct 2026: the Facebook button carries its mark too, at 20px. */
.has-facebook-mark .wp-block-button__link::before {
inline-size: 20px;
block-size: 20px;
-webkit-mask-image: var(--tt-facebook-icon);
mask-image: var(--tt-facebook-icon);
}
/*
* On a ground that is not LINE green the white glyph becomes LINE's own app
* icon (green square, white bubble, letters showing green). Never on green:
* a green square on a green button disappears.
*/
.is-style-band-green .wp-block-button.is-style-line .wp-block-button__link::before,
.tt-icon.tt-icon--line > a::before {
background: var(--tt-line-app-icon) center / contain no-repeat;
-webkit-mask: none;
mask: none;
}
/* On the green band the button is white with green text — mark follows the text. */
.is-style-band-green .wp-block-button__link { color: var(--wp--preset--color--line-green); }
/* --- Group styles --------------------------------------------------------- */
.wp-block-group.is-style-card {
background-color: var(--wp--preset--color--surface-1);
border-radius: var(--tt-radius-md);
box-shadow: var(--wp--preset--shadow--card);
padding: var(--wp--preset--spacing--50);
}
.wp-block-group.is-style-glass {
background-color: var(--tt-glass-bg);
border: .5px solid var(--tt-glass-border);
border-radius: var(--tt-radius-lg);
backdrop-filter: blur(var(--tt-glass-blur));
-webkit-backdrop-filter: blur(var(--tt-glass-blur));
}
/*
* Text on the navy band names its own colour, and names it once.
*
* `band` is #00326C in BOTH style variations — the dark variation redefines
* base, contrast and the band's border, and leaves the fill alone — so anything
* sitting on it must be light in both, and neither `base` nor `contrast` is
* that. `contrast` is black in the light theme, `base` is #0B1220 in the dark
* one; each was used here and each is wrong in exactly one theme. One custom
* property, set beside the colour it has to work against.
*/
.wp-block-group.is-style-band-dark {
color: var(--wp--custom--band--text);
}
/*
* `band-green` (#30D935) is a LIGHT ground and no template renders it today, so
* it is deliberately left on the page's own text colour rather than given the
* band's white — white on that green measures about 1.8:1. When something does
* use it, it needs its own answer, not this one.
*/
.wp-block-group.is-style-band-green {
color: var(--wp--preset--color--base);
}
.is-style-band-green :where(h1, h2, h3, h4, h5, h6) { color: #fff; }
.is-style-band-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--wp--custom--band--text); }
/* Bands are a navy fill in the light theme and a raised surface in the dark one,
where they need a hairline to separate from the page. */
.is-style-band-dark,
.has-band-background-color {
border-block: 1px solid var(--wp--custom--band--border);
}
.tt-footer { border-block-start: 1px solid var(--wp--custom--band--border); }
.tt-header { border-block-end: 1px solid var(--wp--custom--band--border); }
/* Product photos are cut-outs on white; on a dark surface they need their own
white plate or they float on a dark rectangle. */
.tt-card .wc-block-components-product-image,
.tt-product .woocommerce-product-gallery__image {
background: var(--wp--custom--card--frame);
border-radius: var(--tt-radius-md);
}
.tt-card .wc-block-components-product-image { border: 6px solid var(--wp--custom--card--frame); }
/* --- Heading with the gold rule the section titles use -------------------- */
.wp-block-heading.is-style-ruled {
display: flex;
align-items: center;
gap: var(--wp--preset--spacing--50);
}
.wp-block-heading.is-style-ruled::after {
content: "";
flex: 1 1 auto;
block-size: 2px;
background: var(--wp--preset--color--brand-gold);
}
/* --- Product cards: equal height, CTA pinned to the bottom ---------------- */
.tt-card { block-size: 100%; display: flex; flex-direction: column; overflow: hidden; }
/* One text block for every surface — shop, home, landing pages. Everything in it
reads from the left edge, and the price + button sit on the bottom of the
card whatever the title and the feature line did above them. */
.tt-card__body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: stretch;
text-align: start;
}
.tt-card__body > * { text-align: start; }
/*
* The body and the foot are constrained-layout groups, and WordPress gives every
* child of one `margin-inline: auto` plus a max-width. On a column flex parent
* that auto margin centres each box — so the title, the feature line, the price
* and the button were all sitting in the middle of the card while their
* `text-align` computed, correctly and uselessly, as `start`. Cancel both.
*/
.tt-card__body > *,
.tt-card__foot > * {
margin-inline: 0;
max-inline-size: none;
inline-size: 100%;
}
.tt-card__foot { margin-block-start: auto; padding-block-start: var(--wp--preset--spacing--30); }
.tt-card .wp-block-buttons { margin-block-start: 0; justify-content: flex-start; }
.tt-card .wp-block-post-title { margin: 0; }
/*
* A ROW OF CARDS IS ONE SHAPE (owner, 22 Sep 2026).
*
* The foot already sits on the bottom of the card, so the price row and the
* button lined up across a row by accident of that — and everything else about
* them differed. Measured on the inflatables category at 1440: three buttons
* 193, 168 and 125px wide, and on the sets category one 276px wide inside a
* 256px card, which is the overflow the sky tube shows.
*
* The cause is one line: `.tt-card__foot` was shrink-to-fit, so it took the
* width of whatever was in it and the button inherited that. The read-more
* carries `is-layout-flex` from the block wrapper it was born in, which makes
* it a flex CONTAINER — its own width, not its parent's.
*/
.tt-card__body,
.tt-card__foot {
inline-size: 100%;
box-sizing: border-box;
/* the card is a column flex container; a child that does not stretch is a
child as wide as its own longest line, which is where 201px of body
inside a 284px card came from */
align-self: stretch;
}
/*
* TWO LINES OF TITLE, ALWAYS. A one-line title and a two-line one made two
* different cards of the same design; the space is reserved either way and a
* third line is cut rather than allowed to push the card open. `min-block-size`
* is in `em` so it follows the type rather than a number that has to be kept in
* step with it.
*/
.tt-card .wp-block-post-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-block-size: 2.6em;
line-height: 1.3;
}
/*
* THE PRICE ROW KEEPS ITS HEIGHT whether or not "เริ่มต้นที่" is there. The
* prefix is inline, so a card without it is not shorter — but a long price
* beside it wraps on a phone and that card alone becomes taller. Two lines are
* reserved at 390 and one at 1440, which is what each width actually needs.
*/
.tt-card .wc-block-components-product-price,
.tt-card .tt-cat-card__meta {
display: block;
min-block-size: 1.3em;
line-height: 1.3;
}
@media (max-width: 781px) {
.tt-card .wc-block-components-product-price,
.tt-card .tt-cat-card__meta { min-block-size: 2.6em; }
}
/*
* ONE BUTTON WIDTH, CENTRED, AND NEVER WIDER THAN THE CARD. `min()` rather than
* a width plus a max-width: on a narrow card the second term wins and the
* button is the card's inner width, which is the only sensible answer there.
*/
.tt-card__cta.wp-block-read-more {
/* `border-box`, or the 16px of padding on each side lands OUTSIDE the width
and a 180px button measures 212 — which is what overflowed the card */
box-sizing: border-box;
inline-size: min(100%, 180px);
margin-inline: auto;
margin-block-start: var(--wp--preset--spacing--20);
}
.tt-product-grid .wc-block-product-template__responsive,
.tt-product-row .wc-block-product-template__responsive { align-items: stretch; }
.tt-footer__legal { margin-block-start: var(--wp--preset--spacing--40); }
.tt-footer__legal a { text-decoration: underline; }
/* --- Cookie consent -------------------------------------------------------
* A card in the bottom-left corner on a desktop, a bottom sheet on a phone.
* Same frosted panel as the tiles and the floating menu button, so it reads as
* part of the site rather than a plugin someone bolted on.
*/
.tt-consent {
position: fixed;
z-index: 400;
inset-block-end: 0;
inset-inline-start: 0;
padding: 16px;
padding-block-end: calc(16px + env(safe-area-inset-bottom, 0px));
max-inline-size: 420px;
}
.tt-consent[hidden] { display: none !important; }
/*
* While the consent banner is open the page grows by its height, so a primary
* button near the bottom of a short page can always be scrolled clear of it
* (cycle 75). The variable is set and removed by assets/js/consent.js; with no
* banner there is no variable and no padding.
*/
body { padding-block-end: var(--tt-consent-space, 0px); }
.tt-consent__panel {
padding: 20px;
border-radius: 14px;
/* Opaque, not frosted. The mobile CTA bar is a green bar fixed to the same
edge, and at 82% it bled through and tinted the reject button green — it
read as a styled "safe" button when it is the plain one. */
background: rgba(255, 255, 255, .96);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 32px rgba(0, 0, 0, .22);
color: #354156;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.tt-consent__panel {
background: rgba(255, 255, 255, .96);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
}
}
.tt-consent__title {
margin: 0 0 6px;
color: #00366F;
font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
line-height: 1.4;
}
.tt-consent__text { margin: 0 0 12px; font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.tt-consent__cats { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.tt-consent__cats[hidden] { display: none !important; }
.tt-consent__cats label { display: flex; gap: 8px; align-items: start; font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.tt-consent__cats input { margin-block-start: 3px; accent-color: var(--wp--preset--color--brand-blue); }
.tt-consent__cats strong { color: #00366F; }
.tt-consent__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-consent__btn {
min-block-size: 44px;
padding-inline: 16px;
border: 1px solid var(--wp--preset--color--brand-blue);
border-radius: var(--tt-radius-sm);
/* Opaque, not transparent. Transparent let the green CTA bar behind the panel
through and tinted "ปฏิเสธทั้งหมด" green — a rejection button that looks
like the friendly one is a dark pattern by accident. */
background: var(--wp--preset--color--base);
color: var(--wp--preset--color--brand-blue);
font: inherit;
font-weight: 700;
cursor: pointer;
}
.tt-consent__btn--accept {
background: var(--wp--preset--color--brand-blue);
color: #fff;
flex: 1 1 auto;
}
.tt-consent__btn:focus-visible { outline: 3px solid var(--wp--preset--color--brand-gold); outline-offset: 2px; }
@media (max-width: 600px) {
/* A sheet, not a card: at this width a corner card covers the content it is
asking about. */
.tt-consent { inset-inline: 0; max-inline-size: none; padding: 0; }
/* The sheet covers the CTA bar completely, so there is nothing to blur and
every bit of translucency is just the green bar showing through. */
.tt-consent__panel {
border-radius: 14px 14px 0 0;
background: var(--wp--preset--color--base);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.tt-consent__btn { inline-size: 100%; }
}
/* --- Floating menu button (phones and small tablets) ---------------------
* The header scrolls away and the sheet then has no opener. This is the same
* frosted panel as the tiles, 44px so it clears the tap-target minimum, and it
* is only ever on screen when the header is not — the JS in
* blocks/site-nav/view.js watches the header with an IntersectionObserver and
* hides this while the sheet itself is open.
*/
.tt-floatburger { display: none; }
@media (max-width: 1080px) {
.tt-floatburger {
display: grid;
place-items: center;
position: fixed;
inset-block-start: calc(16px + env(safe-area-inset-top, 0px));
inset-inline-start: calc(16px + env(safe-area-inset-left, 0px));
z-index: 310;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .9);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 4px 14px rgba(0, 0, 0, .18);
cursor: pointer;
transition: opacity .18s ease, transform .18s ease;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.tt-floatburger {
background: rgba(255, 255, 255, .72);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
backdrop-filter: blur(14px) saturate(1.4);
}
}
/* Our own `display` beats the UA [hidden] rule — CLAUDE.md 12. */
.tt-floatburger[hidden] { display: none !important; }
/* the drawer is open: the floating menu button would sit on its title (27 Sep 2026) */
body.tt-cfg-locked .tt-floatburger { display: none !important; }
.tt-floatburger::before {
content: "";
inline-size: 20px;
block-size: 14px;
background: #00366F;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.tt-floatburger:focus-visible {
outline: 3px solid var(--wp--preset--color--brand-gold);
outline-offset: 2px;
}
.tt-floatburger:active { transform: scale(.94); }
}
@media (prefers-reduced-motion: reduce) {
.tt-floatburger { transition: none; }
.tt-floatburger:active { transform: none; }
}
/* --- Language switcher (hidden until there is a second language) ---------
* Same segmented shape as the shop's usage toggle, so the two read as one
* family. Nothing renders until tightent_has_second_language() is true.
*/
.tt-nav__lang,
.tt-sheet__lang {
display: inline-flex;
padding: 3px;
border: 1px solid var(--wp--preset--color--border);
border-radius: var(--wp--custom--radius--pill);
}
.tt-nav__lang-item,
.tt-sheet__lang-item {
display: inline-flex;
align-items: center;
min-block-size: 30px;
padding-inline: 12px;
border-radius: var(--wp--custom--radius--pill);
color: var(--wp--preset--color--muted);
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
text-decoration: none;
}
.tt-nav__lang-item.is-current,
.tt-sheet__lang-item.is-current {
background: var(--wp--preset--color--brand-blue);
color: var(--wp--preset--color--base);
}
.tt-sheet__lang { margin-block: 8px 0; }
/* --- Frosted glass panel over photography --------------------------------
* One treatment, used everywhere a caption sits on top of a photo: the
* application tiles on the home page, their arrow, and the category tiles.
* Values are the brief's: blur 14, saturate 1.4, white at 72%, a 1px inner
* highlight, 14px radius, 12px in from the tile edge.
*
* The opacity is declared twice on purpose. Without backdrop-filter a 72% white
* is just a washed-out hole in the photo and the text loses contrast, so those
* browsers get 90% instead — @supports, not a guess.
*
* Contrast, measured against the panel composited over the extremes a photo can
* be (WCAG AA needs 4.5 for this text):
* navy #00366F 6.02 over black, 11.95 over white
* slate #354156 5.18 over black, 10.28 over white
*/
.tt-app__bar,
.tt-tiles .wp-block-cover__inner-container {
background: rgba(255, 255, 255, .9);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
border-radius: 14px;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.tt-app__bar,
.tt-tiles .wp-block-cover__inner-container {
/*
* 48%, not the 40% the mockup asks for: at 40 the navy on the busiest
* tile (ธงชายหาด, four printed flags) measures 4.29:1 at 1440 and 4.04:1
* at 768 against the worst pixel behind the bar — under AA. Stepped up in
* 4s, 44 still fails at 768 (4.41), 48 clears everywhere with 4.79 to
* spare at the worst width. Lowest passing value, not a round one.
*/
background: rgba(255, 255, 255, .48);
-webkit-backdrop-filter: blur(3px) saturate(1.1);
backdrop-filter: blur(3px) saturate(1.1);
}
}
.tt-tiles .wp-block-cover__inner-container :where(h3, h3 a) { color: #00366F; }
.tt-tiles .wp-block-cover__inner-container :where(p) { color: #354156; }
/* --- WooCommerce product gallery ------------------------------------------
* WooCommerce ships the gallery at `opacity: 0` and lets wc-single-product.js
* fade it in once flexslider has initialised. inc/performance.php dequeues that
* script to get rid of PhotoSwipe — its comment claims "the gallery slider
* stays", and it does not: the same handle carries both. The result was a
* product page with no product photograph on it, on every product, invisible to
* every check because the is present, loaded and correctly sized — only
* its container is transparent.
*
* The theme does its own variation image swap (assets/js/variation-radios.js,
* gotcha 7), so nothing here needs flexslider. Reveal the gallery in CSS and lay
* the thumbnails out ourselves.
*/
.woocommerce-product-gallery { opacity: 1 !important; }
/*
* ONE UNIFORM GRID, and the main image above it.
*
* "the plain grid they already are" was wrong: Woo's classic sheet floats the
* thumbnails at 25% and lets each keep its own aspect, so a row could hold a
* 128x128 beside a 128x421 and the next row started wherever the tallest one
* ended. Measured on the beach flag: six tiles, six heights, 165px of hole.
*
* Four per row at 1440, three at 390, nothing between them. The first child —
* the main photograph, or the live preview on a configured product — spans the
* row: it is the thing the page is about, not a tile.
*/
.woocommerce-product-gallery__wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.woocommerce-product-gallery__wrapper > :first-child { grid-column: 1 / -1; }
@media (max-width: 781px) {
.woocommerce-product-gallery__wrapper { grid-template-columns: repeat(3, 1fr); }
}
/*
* Woo sizes the thumbnails at `width: 25%` and floats them, which is its own
* four-column layout done the 2014 way. Inside a grid track that 25% is 25% of
* the TRACK: a 128px column with a 32px picture in the corner of it, measured.
* `!important` for the same reason as the `opacity` line above — Woo's rule is
* more specific than anything a theme sheet can say about the same element
* without naming its whole ancestry, and this is scoped to the one wrapper.
*/
.woocommerce-product-gallery__wrapper > * {
float: none !important;
inline-size: auto !important;
margin: 0 !important;
}
/*
* A square tile with the whole photograph inside it. `contain`, not `cover`:
* the fill behind it (below) is what the leftover space is for, and a per-slot
* `object-fit` written inline by tightent_slot_focus_attr() still beats this,
* which is how an attachment set to `cover` keeps cropping.
*
* No radius on a tile: with no gaps between them, eight rounded corners meeting
* in the middle of the grid is four little holes.
*/
.tt-product .tt-gal__tile { aspect-ratio: 1; border-radius: 0; }
.tt-gal__tile .wp-block-image,
.tt-gal__tile figure { block-size: 100%; margin: 0; }
/* `div.images img { height: auto }` is Woo's, and it is what letterboxes a
picture inside a square tile instead of filling it. */
.tt-gal__tile img {
inline-size: 100%;
block-size: 100% !important;
object-fit: contain;
display: block;
}
/*
* The gallery stays in view while a long right column scrolls (owner, 26 Sep
* 2026) — desktop only. The left column stops stretching, or it is as tall
* as the right and has nowhere to stick. `--tt-gal-top` comes from
* assets/js/sticky-gallery.js: below the header, or bottom-aligned for a
* gallery taller than the window.
*/
@media (min-width: 782px) {
/* align-self: core sets `align-items: normal !important` on every columns block */
.tt-product > .wp-block-columns > .wp-block-column:first-child {
align-self: flex-start;
position: sticky;
top: var(--tt-gal-top, calc(var(--wp--custom--header--height) + 24px));
}
}
/*
* The main image is a square frame too (owner, 26 Sep 2026), with the radius it
* always had. `!important` on object-fit, scoped to the gallery: a slot set to
* `cover` writes object-fit INLINE on the , no selector reaches an inline
* style, and a product photograph must never be cropped.
*/
.tt-product .tt-gal__lead { aspect-ratio: 1; }
.tt-gal__lead .wp-block-image,
.tt-gal__lead figure { block-size: 100%; margin: 0; }
.tt-product .tt-gal__lead img {
display: block;
inline-size: 100%;
block-size: 100% !important;
object-fit: contain;
}
.tt-product .tt-gal__lead img,
.tt-product .tt-gal__tile img { object-fit: contain !important; }
/* --- Category tiles ------------------------------------------------------
* Cycle 32. The photo fills the tile again and a thin glass bar rides on top of
* it. Cycle 31 did the opposite — the image stopped short of a 104px panel — and
* the panel won too much of the tile for what it carries: a name and an arrow.
*
* Our tile assets are cut-outs on transparency, so `cover` crops a background
* that is mostly nothing; the radial wash is what the transparent part shows.
*/
.tt-tiles .wp-block-cover {
background-color: var(--wp--preset--color--surface-lilac);
/*
* The cover ships as a ROW flex container — that is why the bar used to sit
* at the bottom through `align-self`, the cross axis. Stacking the image,
* the floor line and the bar needs the main axis, so the direction changes
* here and `justify-content` becomes the vertical one.
*/
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
/* The tile's own padding is the bar's 12px inset on all four sides. */
padding: 12px !important;
/* 8% behind the product, deepening to 12% at the foot of the tile — the
product reads as standing on something rather than floating on a flat
panel, and the glass has more to blur where it overlaps. */
background-image:
linear-gradient(
to bottom,
transparent 45%,
color-mix(in srgb, var(--wp--preset--color--brand-blue) 12%, transparent) 100%
),
radial-gradient(
ellipse 80% 60% at 50% 38%,
color-mix(in srgb, var(--wp--preset--color--brand-blue) 8%, transparent) 0%,
transparent 70%
);
}
/*
* Cycle 37: the image is the tile. `contain` against the whole tile box with an
* 8px inset, centred — no safe area, no reserved strip, no arithmetic. The bar
* lies over whatever the product's height leaves it, and the glass is thin
* enough to read the product through (see the glass block above).
*/
.tt-tiles .wp-block-cover__image-background {
position: absolute;
inset: 8px;
/* Stated, not `auto`: an absolutely positioned REPLACED element sizes itself
from its intrinsic dimensions when the sizes are auto, insets or no insets
(gotcha 23). Left on auto the boxes came out anywhere from 43% to 96% of
the tile. */
inline-size: calc(100% - 16px);
block-size: calc(100% - 16px);
margin: 0;
object-fit: contain;
object-position: center;
}
/* --- The glass bar, shared by category and application tiles --------------
* The name, one line of description and the arrow — all of it visible at rest.
* Nothing here appears on hover any more: copy that only a mouse can reach is
* copy a phone never gets, and half the traffic is a phone.
*
* The bar is capped at 22% of the tile (26% at 390) and verify-tiles.js
* measures that at all three widths — the cap is why the tile heights below are
* what they are, and not the other way round.
*/
.tt-tiles,
.tt-apps { --tt-tile-bar: 72px; }
.tt-tiles .wp-block-cover__inner-container,
.tt-app__bar {
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: 10px;
margin: 0;
align-content: center;
padding: 10px 14px;
min-block-size: var(--tt-tile-bar);
overflow: hidden;
}
/* In a column container `align-self` is the horizontal axis: flex-end here would
shrink the bar to its text and push it to the right. */
.tt-tiles .wp-block-cover__inner-container { align-self: stretch; flex: 0 0 auto; }
.tt-tiles .wp-block-cover__inner-container > h3,
.tt-app__title {
grid-column: 1;
margin: 0;
line-height: 1.5;
/* One line, and no name reaches the clamp at 1440 — measured against a
nowrap clone, not assumed. */
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
/*
* 20px, stated: the bar is a fixed-height component and the fluid presets move
* under it. The heading also ships as has-large-font-size (24px), which is
* section-heading size and ellipsised ฉากหลังและแบนเนอร์ in a 288px tile — hence
* the !important, which the preset class forces. It is NOT on .tt-app__title:
* carrying it there beat the <=600 rule and left the application names at 20px
* on a 167px tile (gotcha 19 — a later rule is not automatically a winner).
*/
.tt-tiles .wp-block-cover__inner-container > h3 { font-size: 20px !important; }
.tt-app__title { font-size: 20px; }
/* The arrow: a filled navy disc at the end of the bar. The category tiles have
no element for it, so it is drawn as ::after; the application tiles ship a
real