@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap'); /* ============================================================================ Tender Gourmet Butchery case study - Boococks-structure redesign (standalone) ---------------------------------------------------------------------------- Section flow mirrors boococks-case-study-redesign.html exactly: banner → intro (meta + copy + bigstats + logostrip) → device scene → screens carousel → dark dev section (5 boxed rows) → testimonial → CTA. Palette reskinned from butcher forest/cream to TGB espresso/cream/caramel. Var names kept from the Boococks file so the two stylesheets diff cleanly: --forest* = TGB umber/espresso browns · --moss = caramel accent on dark. Assets come from the live eux.com.au uploads for the TGB portfolio page. ============================================================================ */ .tgx { /* Butcher cream (shared with Boococks - matches TGB's site cream) */ --cream: #F6EFE2; --cream-50: #FBF6EC; --cream-100: #F2E9D8; --cream-200: #E9DCC4; --paper: #FFFDF8; /* Warm charcoal inks */ --ink: #231F1B; --ink-900: #1A1613; --ink-800: #2E2823; --ink-700: #463E37; --ink-600: #5F554C; --ink-500: #7C7166; --ink-400: #9C9186; --ink-300: #C2B8AC; --ink-200: #DCD4C6; --ink-100: #E9E3D4; /* TGB umber / espresso (the "forest" slots) */ --forest: #7A4A32; --forest-600: #6C4029; --forest-700: #5A3522; --forest-800: #3B2519; --forest-900: #241610; --forest-050: #F4E9DF; --forest-100: #EBDCC9; --moss: #C0966B; --rust: #9E3B23; --gold: #B7892F; --woo: #720EEC; --mailchimp: #FFE01B; --ga: #E37400; --ok: #4F7B3A; --serif: 'Cormorant Garamond', Georgia, serif; --ui: 'Plus Jakarta Sans', system-ui, sans-serif; --body: 'Open Sans', system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dark-line: rgba(246, 239, 226, 0.13); --shadow-2: 0 2px 6px rgba(26, 22, 19, 0.07), 0 24px 60px rgba(26, 22, 19, 0.12); } .tgx, .tgx * { margin: 0; padding: 0; box-sizing: border-box; } .tgx { scroll-behavior: smooth; } .tgx { font-family: var(--body); color: var(--ink-800); background: var(--paper); -webkit-font-smoothing: antialiased; } .tgx img { max-width: 100%; display: block; } .tgx .container { max-width: 1240px; margin: 0 auto; padding: 0 48px; } .tgx h1, .tgx h2, .tgx h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; color: var(--ink-900); text-wrap: balance; } .tgx h1 { font-size: clamp(44px, 5.6vw, 76px); line-height: 1.02; } .tgx h2 { font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; } .tgx h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; } .tgx em { font-style: italic; font-weight: 400; color: var(--forest); } .tgx p.lede { font-size: 17px; line-height: 1.65; color: var(--ink-700); } /* Scroll reveal (.reveal → .in, same recipe as Boococks) */ .tgx .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); } .tgx .reveal.in { opacity: 1; transform: none; } @keyframes bcxPulse { 70% { box-shadow: 0 0 0 8px rgba(192, 150, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 150, 107, 0); } } @media (prefers-reduced-motion: reduce) { .tgx .reveal { opacity: 1 !important; transform: none !important; transition: none; } } /* ============================ 1. BANNER (thin, full-width) ============================ */ .tgx .banner { position: relative; background: var(--forest-900); height: clamp(220px, 26vw, 310px); overflow: hidden; } .tgx .banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(900px 380px at 50% 120%, rgba(192, 150, 107, 0.22), transparent 70%); pointer-events: none; } .tgx .banner__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: clamp(48px, 6vw, 80px); width: auto; filter: brightness(0) invert(1); z-index: 3; } /* Steak medallion peeking from the left edge (the Jaggards coin slot) - circular crop of the old TGB hero mockup, centred on the cutting board */ .tgx .banner__coin { position: absolute; left: 110px; top: 50%; transform: translateY(-42%); width: clamp(220px, 26vw, 320px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 6px solid rgba(183, 137, 47, 0.55); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); } .tgx .banner__coin img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 72%; } /* Screenshot frames peeking from the top / right edges */ .tgx .banner__shot { position: absolute; z-index: 1; background: var(--paper); border-radius: 14px; overflow: hidden; border: 1px solid rgba(246, 239, 226, 0.25); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.4); } .tgx .banner__shot img { width: 100%; height: auto; display: block; } .tgx .banner__shot--a { width: clamp(200px, 20vw, 300px); height: clamp(170px, 17vw, 250px); right: 3%; top: 20%; transform: rotate(-2deg); } .tgx .banner__shot--a img { height: 100%; object-fit: cover; object-position: center top; } .tgx .banner__shot--b { width: clamp(150px, 15vw, 210px); right: -3%; bottom: -42%; transform: rotate(2deg); } /* ============================ 1b. INTRO - 1/3 sidebar + 2/3 copy, stats below ============================ */ .tgx .intro { background: var(--cream-50); padding: 96px 0 84px; } .tgx .intro strong { color: var(--ink-900); } .tgx .intro__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; align-items: start; } /* Sidebar - bordered card with hairline separators between groups */ .tgx .intro__meta { border: 1px solid var(--ink-200); border-radius: 16px; overflow: hidden; background: var(--cream-50); } .tgx .intro__meta > div { padding: 26px 28px 28px; } .tgx .intro__meta > div + div { border-top: 1px solid var(--ink-200); } .tgx .intro__label { font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } .tgx .intro__val { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink-900); margin-top: 9px; } .tgx .intro__val a { color: var(--forest-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .tgx .intro__meta ul { list-style: none; margin-top: 12px; display: grid; gap: 9px; } .tgx .intro__meta li { font-family: var(--ui); font-size: 14px; font-weight: 500; color: var(--ink-800); } .tgx .intro__meta li u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--forest-700); font-weight: 600; } .tgx .intro__main h1 { font-size: clamp(36px, 4.2vw, 56px); } .tgx .intro__main p { font-size: 15.5px; line-height: 1.7; color: var(--ink-700); margin-top: 20px; max-width: 68ch; } .tgx .intro__main p:first-of-type { margin-top: 34px; } /* Big stats row - serif numerals with column dividers */ .tgx .bigstats { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 68px; } .tgx .bigstat { padding: 6px 34px 0; border-left: 1px solid var(--ink-200); } .tgx .bigstat:first-child { border-left: 0; padding-left: 0; } .tgx .bigstat .n { font-family: var(--serif); font-size: clamp(48px, 5vw, 68px); font-weight: 500; line-height: 1; color: var(--ink-900); } .tgx .bigstat .n em { font-style: normal; color: var(--moss); } .tgx .bigstat p { font-family: var(--ui); font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--ink-600); margin-top: 16px; max-width: 26ch; } /* Platform logo strip */ .tgx .logostrip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 34px; margin-top: 84px; padding-top: 44px; border-top: 1px solid var(--ink-100); } .tgx .logostrip img { height: 28px; width: auto; filter: grayscale(1); opacity: 0.55; transition: opacity 0.3s, filter 0.3s; } .tgx .logostrip img:hover { filter: none; opacity: 1; } .tgx .intro__div { border: 0; border-top: 1px solid var(--ink-100); margin-top: 84px; } .tgx .shot-scroll { position: relative; overflow: hidden; } .tgx .shot-scroll img { width: 100%; height: auto; will-change: transform; } /* ============================ 2. DEVICE SCENE (multi-device render + floating tags) ============================ */ .tgx .scene-sec { background: var(--cream-50); padding: 96px 0 110px; overflow: hidden; } .tgx .scene { position: relative; max-width: 1060px; margin: 0 auto; } .tgx .scene__glow { position: absolute; inset: 10% 6% 0; background: radial-gradient(closest-side, rgba(192, 150, 107, 0.18), transparent); pointer-events: none; } .tgx .scene__img { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--ink-100); } .tgx .scene__img img { width: 100%; height: auto; display: block; } /* Floating tags */ .tgx .ftag { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--ink-100); border-radius: 14px; padding: 11px 16px 11px 11px; box-shadow: var(--shadow-2); } .tgx .ftag__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; } .tgx .ftag b { display: block; font-family: var(--ui); font-size: 13px; font-weight: 700; color: var(--ink-900); } .tgx .ftag span span { display: block; font-size: 11px; color: var(--ink-500); margin-top: 1px; } .tgx .ftag--a { top: 26px; right: -26px; } .tgx .ftag--b { bottom: 40px; left: -34px; } /* Browser chrome (carousel cards) */ .tgx .browser__bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--cream-50); border-bottom: 1px solid var(--ink-100); } .tgx .browser__dots { display: flex; gap: 5px; } .tgx .browser__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-200); } .tgx .browser__dots i:nth-child(1) { background: #E0897C; } .tgx .browser__dots i:nth-child(2) { background: #E4C580; } .tgx .browser__dots i:nth-child(3) { background: #9DBB8A; } .tgx .browser__url { flex: 1; max-width: 380px; margin: 0 auto; font-family: var(--mono); font-size: 11px; color: var(--ink-700); background: var(--paper); border: 1px solid var(--ink-100); border-radius: 999px; padding: 5px 14px; text-align: center; } /* ============================ 3. SCREENS - title · text · breakout slider ============================ */ .tgx .screens { background: var(--paper); padding: 110px 0; overflow: hidden; } .tgx .screens__hd { max-width: 760px; } .tgx .screens__hd h2 { margin: 18px 0 0; } .tgx .screens__hd hr { border: 0; border-top: 1px solid var(--ink-200); margin: 26px 0 30px; } /* Shared section-title underline */ .tgx .sec-hr { border: 0; border-top: 1px solid var(--ink-200); margin: 26px 0 30px; max-width: 760px; } .tgx .sec-hr--dark { border-top-color: var(--dark-line); } .tgx .screens__lead { font-family: var(--ui); font-size: 15px; font-weight: 700; color: var(--ink-900); } .tgx .screens__hd p.body { font-size: 15px; line-height: 1.7; color: var(--ink-700); margin-top: 16px; } .tgx .screens__hd .listlabel { font-family: var(--ui); font-size: 14.5px; font-weight: 700; color: var(--ink-900); margin-top: 22px; } .tgx .screens__hd ul { margin: 12px 0 0 20px; display: grid; gap: 8px; } .tgx .screens__hd li { font-size: 14.5px; line-height: 1.55; color: var(--ink-700); } /* Salient-style Flickity carousel: 2-up desktop · wrap-around · 5s autoplay, pause on hover · overlaid arrows · dots. The TGB captures are composed shots on white, so cells centre + contain instead of auto-panning. */ .tgx .screens-carousel { margin-top: 56px; } .tgx .screens-carousel .flickity-viewport { overflow: visible; } .tgx .scr-cell { width: 828px; max-width: calc(100vw - 96px); margin-right: 20px; } .tgx .scr-card { border: 1px solid var(--ink-100); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: var(--shadow-2); } .tgx .scr-card .browser__bar { padding: 10px 14px; } .tgx .scr-fit { height: 560px; display: grid; place-items: center; background: #fff; padding: 26px; } .tgx .scr-fit img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* Photo cells (device render) fill the frame edge-to-edge */ .tgx .scr-cell--photo .scr-fit { padding: 0; } .tgx .scr-cell--photo .scr-fit img { width: 100%; height: 100%; max-height: none; object-fit: cover; } .tgx .screens-carousel .flickity-prev-next-button { width: 46px; height: 46px; background: var(--paper); box-shadow: 0 2px 10px rgba(26, 22, 19, 0.18); } .tgx .screens-carousel .flickity-prev-next-button:hover { background: #fff; } .tgx .screens-carousel .flickity-button-icon { fill: var(--ink-900); } .tgx .screens-carousel .flickity-page-dots { position: static; margin-top: 34px; } .tgx .screens-carousel .flickity-page-dots .dot { width: 8px; height: 8px; margin: 0 5px; background: var(--ink-300); opacity: 1; transition: transform 0.25s, background 0.25s; } .tgx .screens-carousel .flickity-page-dots .dot.is-selected { background: var(--forest); transform: scale(1.35); } /* ============================ 4. DEV SECTION (dark espresso) ============================ */ .tgx .dev { background: var(--forest-900); color: var(--cream); padding: 110px 0 90px; } .tgx .dev__hd { margin-bottom: 56px; } .tgx .dev__hd h2 { color: var(--cream); margin-top: 18px; } .tgx .boxrow { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background: var(--cream-50); border-radius: 20px; padding: 56px; margin-bottom: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); } .tgx .boxrow--flip .boxrow__copy { order: 2; } .tgx .boxrow--flip .boxrow__mock { order: 1; } .tgx .boxrow__num { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--gold); } .tgx .boxrow h3 { color: var(--ink-900); margin: 14px 0 16px; } .tgx .boxrow p { font-size: 15.5px; line-height: 1.65; color: var(--ink-700); } .tgx .boxrow ul { margin: 18px 0 0 2px; list-style: none; display: grid; gap: 10px; } .tgx .boxrow li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.55; color: var(--ink-800); } .tgx .boxrow li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background-color: rgba(122, 74, 50, 0.16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6.2 9.4 10 4.8' fill='none' stroke='%237A4A32' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .tgx .boxrow__mock { min-width: 0; } .tgx .mockcard { background: var(--forest-900); border: 1px solid var(--dark-line); border-radius: 16px; padding: 26px; } .tgx .mockcard--center { display: flex; justify-content: center; } /* --- Mockup A: phone checkout (row 01) - working fulfilment toggle, qty stepper, live totals, TopSMS footnote. --- */ .tgx .ckphone { width: min(272px, 100%); margin: 0 auto; background: var(--ink-900); border: 1px solid rgba(246, 239, 226, 0.18); border-radius: 28px; padding: 9px; } .tgx .ckphone__scr { border-radius: 20px; overflow: hidden; background: var(--paper); } .tgx .ck__top { font-family: var(--ui); font-size: 8.5px; font-weight: 700; letter-spacing: 0.14em; text-align: center; padding: 9px 6px; background: var(--forest-900); color: var(--cream); text-transform: uppercase; } .tgx .ck__bd { padding: 13px 14px 15px; } .tgx .ck__seg { display: flex; border: 1px solid var(--ink-200); border-radius: 10px; overflow: hidden; margin-bottom: 12px; } .tgx .ck__opt { flex: 1; border: 0; background: var(--paper); font-family: var(--ui); font-size: 10.5px; font-weight: 700; color: var(--ink-500); padding: 9px 4px; cursor: pointer; transition: background 0.2s, color 0.2s; } .tgx .ck__opt.on { background: var(--forest); color: var(--cream); } .tgx .ck__item { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid var(--ink-100); } .tgx .ck__nm { font-family: var(--serif); font-size: 14.5px; color: var(--ink-900); line-height: 1.15; } .tgx .ck__nm small { display: block; font-family: var(--mono); font-size: 8px; color: var(--ink-500); margin-top: 3px; } .tgx .ck__qty { margin-left: auto; display: flex; align-items: center; gap: 7px; } .tgx .ck__qty button { width: 21px; height: 21px; border: 1px solid var(--ink-200); border-radius: 6px; background: var(--paper); color: var(--ink-800); font-family: var(--ui); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; } .tgx .ck__qty b { font-family: var(--ui); font-size: 12px; color: var(--ink-900); min-width: 12px; text-align: center; } .tgx .ck__line { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-700); padding: 7px 0 0; } .tgx .ck__line b { font-weight: 600; color: var(--ink-900); } .tgx .ck__line--total { font-family: var(--ui); font-weight: 700; color: var(--ink-900); font-size: 12.5px; border-top: 1px solid var(--ink-200); margin-top: 7px; padding-top: 9px; } .tgx .ck__cta { width: 100%; margin-top: 11px; border: 0; border-radius: 999px; background: var(--forest); color: var(--cream); font-family: var(--ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 11px; cursor: pointer; transition: background 0.25s; } .tgx .ck__cta:hover { background: var(--forest-600); } .tgx .ck__note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); } .tgx .ck__note i { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 0 rgba(192, 150, 107, 0.7); animation: bcxPulse 1.8s ease-out infinite; flex: none; } /* --- Mockup B: pickup & delivery widget (row 02) - steps · tabs · calendar · slots · live summary · Continue. Fully interactive + self-demoing. --- */ @keyframes bcxRouteIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .tgx .pudm { background: var(--paper); border: 1px solid var(--ink-100); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 44px rgba(26, 22, 19, 0.14); } .tgx .pudm__steps { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; background: var(--ink-900); padding: 12px 10px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 239, 226, 0.45); } .tgx .pudm__steps .on { color: var(--cream); font-weight: 700; } .tgx .pudm__tabs { display: flex; border-bottom: 1px solid var(--ink-100); background: var(--cream-100); } .tgx .pudm__tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 8px 10px; font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--ink-500); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; } .tgx .pudm__tab svg { width: 20px; height: 20px; } .tgx .pudm__tab.on { color: var(--ink-900); border-bottom-color: var(--forest); background: var(--paper); } .tgx .pudm__body { padding: 16px 16px 18px; } .tgx .pudm__panel { animation: bcxRouteIn 0.45s var(--ease); } .tgx .pudm__hd { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink-900); margin: 15px 0 9px; } .tgx .pudm__hd:first-child { margin-top: 0; } .tgx .pudm-cal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; } .tgx .pudm-day { border: 1px solid var(--ink-200); background: var(--paper); border-radius: 9px; padding: 8px 3px 7px; text-align: center; cursor: pointer; transition: background 0.2s, border-color 0.2s; } .tgx .pudm-day small { display: block; font-family: var(--mono); font-size: 6.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-500); } .tgx .pudm-day b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink-900); margin: 2px 0 1px; } .tgx .pudm-day .mo { display: block; font-family: var(--mono); font-size: 7px; color: var(--ink-400); } .tgx .pudm-day.on { background: var(--forest); border-color: var(--forest); } .tgx .pudm-day.on small, .tgx .pudm-day.on b, .tgx .pudm-day.on .mo { color: var(--cream); } .tgx .pudm-day.off { opacity: 0.42; cursor: default; } .tgx .pudm-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .tgx .pudm-slot { border: 1px solid rgba(122, 74, 50, 0.4); background: var(--paper); border-radius: 8px; padding: 8px 4px; text-align: center; font-family: var(--mono); font-size: 8px; letter-spacing: 0.02em; line-height: 1.2; color: var(--forest-700); cursor: pointer; transition: background 0.2s, color 0.2s; } .tgx .pudm-slot.on { background: var(--forest); border-color: var(--forest); color: var(--cream); } .tgx .pudm-sel { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 13px; font-family: var(--serif); font-size: 13.5px; color: var(--ink-700); } .tgx .pudm-sel svg { flex: none; } .tgx .pudm-field { border: 1px solid var(--ink-200); border-radius: 9px; background: var(--paper); padding: 8px 11px; } .tgx .pudm-field label { display: block; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); } .tgx .pudm-field b { font-family: var(--ui); font-size: 12.5px; color: var(--ink-900); } .tgx .pudm-continue { width: 100%; margin-top: 13px; border: 0; border-radius: 999px; background: var(--forest); color: var(--cream); font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 13px; cursor: pointer; transition: background 0.25s; } .tgx .pudm-continue:hover { background: var(--forest-600); } /* --- Mockup C: TopSMS phone (row 03) - bubbles animating in on a loop --- */ .tgx .phone { width: min(260px, 100%); margin: 0 auto; background: var(--ink-900); border: 1px solid rgba(246, 239, 226, 0.18); border-radius: 28px; padding: 16px 14px 22px; } .tgx .phone__notch { width: 74px; height: 5px; border-radius: 999px; background: rgba(246, 239, 226, 0.16); margin: 0 auto 16px; } .tgx .phone__hdr { text-align: center; font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 239, 226, 0.45); margin-bottom: 14px; } .tgx .sms { max-width: 92%; background: rgba(246, 239, 226, 0.08); border: 1px solid var(--dark-line); border-radius: 14px 14px 14px 4px; padding: 11px 13px; font-size: 12px; line-height: 1.5; color: rgba(246, 239, 226, 0.9); margin-bottom: 9px; opacity: 0; animation: smsIn 12s ease-out infinite; } .tgx .sms b { color: var(--moss); } .tgx .sms--2 { animation-name: smsIn2; } .tgx .sms--3 { animation-name: smsIn3; border-radius: 14px 14px 4px 14px; margin-left: auto; background: rgba(192, 150, 107, 0.16); } @keyframes smsIn { 0%, 6% { opacity: 0; transform: translateY(8px); } 11%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes smsIn2 { 0%, 30% { opacity: 0; transform: translateY(8px); } 35%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } @keyframes smsIn3 { 0%, 58% { opacity: 0; transform: translateY(8px); } 63%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; } } .tgx .sms__meta { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; color: rgba(246, 239, 226, 0.38); margin-top: 6px; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .tgx .sms { animation: none; opacity: 1; } } /* --- Mockup D: Woo → Mailchimp automation (row 04) - reuses the sync-diagram system: two nodes, dotted routes with travelling dots, and a live email card cycling three campaigns between them. --- */ .tgx .syncm__node { display: flex; align-items: center; gap: 12px; background: rgba(246, 239, 226, 0.05); border: 1px solid var(--dark-line); border-radius: 14px; padding: 14px 16px; position: relative; z-index: 2; } .tgx .syncm__logo { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--ui); font-weight: 800; font-size: 17px; color: #fff; flex: none; } .tgx .syncm__logo--woo { background: var(--woo); } .tgx .syncm__logo--mc { background: var(--mailchimp); color: var(--ink-900); } .tgx .syncm__nm { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--cream); } .tgx .syncm__nm span { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(246, 239, 226, 0.5); margin-top: 3px; font-weight: 400; } .tgx .syncm__tags { margin-left: auto; display: grid; gap: 6px; justify-items: end; } .tgx .syncm__tag { font-family: var(--mono); font-size: 8.5px; color: rgba(246, 239, 226, 0.55); } .tgx .syncm__tag b { color: var(--moss); font-weight: 700; } .tgx .syncm__zone { position: relative; padding: 26px 0; display: flex; justify-content: center; } .tgx .syncm__line { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, rgba(227, 199, 163, 0.45) 0 5px, transparent 5px 10px); } .tgx .syncm__line--l { left: 11%; } .tgx .syncm__line--r { right: 11%; } .tgx .syncm__dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.9); left: calc(11% - 3px); animation: syncmDown 3.4s linear infinite; z-index: 1; } .tgx .syncm__dot--up { left: auto; right: calc(11% - 3px); animation-name: syncmUp; animation-delay: 1.7s; } @keyframes syncmDown { 0% { top: 2%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 94%; opacity: 0; } } @keyframes syncmUp { 0% { top: 94%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 2%; opacity: 0; } } .tgx .syncm__pill { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; background: #fff; color: var(--ink-900); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 7px 15px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); } .tgx .syncm__live { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-family: var(--ui); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--moss); } .tgx .syncm__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 0 rgba(192, 150, 107, 0.7); animation: bcxPulse 1.8s ease-out infinite; } /* The cycling email card */ .tgx .mailcard { position: relative; z-index: 2; width: min(300px, 86%); background: var(--cream-50); border: 1.5px solid rgba(192, 150, 107, 0.7); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); } .tgx .mailcard__bar { display: flex; align-items: center; gap: 8px; background: var(--cream-100); border-bottom: 1px solid var(--ink-100); padding: 9px 12px; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-600); } .tgx .mailcard__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--forest); flex: none; } .tgx .mailcard__bd { padding: 12px 14px 13px; } .tgx .mailcard__subj { position: relative; height: 34px; } .tgx .mailcard__subj span { position: absolute; inset: 0; font-family: var(--ui); font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--ink-900); opacity: 0; } .tgx .mailcard__subj .m1 { animation: mailS1 12s linear infinite; } .tgx .mailcard__subj .m2 { animation: mailS2 12s linear infinite; } .tgx .mailcard__subj .m3 { animation: mailS3 12s linear infinite; } @keyframes mailS1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 6%, 30% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; } } @keyframes mailS2 { 0%, 35% { opacity: 0; transform: translateY(6px); } 39%, 63% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; } } @keyframes mailS3 { 0%, 68% { opacity: 0; transform: translateY(6px); } 72%, 96% { opacity: 1; transform: none; } 99%, 100% { opacity: 0; } } .tgx .mailcard__tag { position: relative; height: 14px; margin-top: 4px; } .tgx .mailcard__tag span { position: absolute; inset: 0; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0; color: var(--forest-700); } .tgx .mailcard__tag .m1 { animation: mailS1 12s linear infinite; } .tgx .mailcard__tag .m2 { animation: mailS2 12s linear infinite; } .tgx .mailcard__tag .m3 { animation: mailS3 12s linear infinite; } .tgx .mailcard__meta { display: flex; justify-content: space-between; margin-top: 9px; border-top: 1px solid var(--ink-100); padding-top: 9px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .tgx .mailcard__meta b { color: var(--forest-700); } @media (prefers-reduced-motion: reduce) { .tgx .syncm__dot { animation: none; opacity: 0; } .tgx .mailcard__subj span, .tgx .mailcard__tag span { animation: none; } .tgx .mailcard__subj .m1, .tgx .mailcard__tag .m1 { opacity: 1; } } /* --- Mockup E: analytics dashboard (row 05) - count-up KPIs + growing revenue bars, Google Analytics footer. Light widget on the cream card. --- */ .tgx .dash { width: 100%; background: var(--paper); border: 1px solid var(--ink-100); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(26, 22, 19, 0.16); } .tgx .dash__top { background: var(--forest-800); padding: 15px 18px 14px; } .tgx .dash__brand { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(246, 239, 226, 0.5); } .tgx .dash__ttl { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--cream); margin-top: 7px; } .tgx .dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--forest-900); border-top: 1px solid rgba(246, 239, 226, 0.12); padding: 12px 18px 14px; } .tgx .dash__kpi small { display: block; font-family: var(--mono); font-size: 6.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(246, 239, 226, 0.5); } .tgx .dash__kpi b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--cream); margin-top: 4px; } .tgx .dash__kpi b em { font-style: normal; font-size: 13px; color: var(--moss); } .tgx .dash__body { padding: 14px 18px 0; } .tgx .dash__sec { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-500); } .tgx .dash__sec::after { content: ''; flex: 1; height: 1px; background: var(--ink-200); } .tgx .dash__chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; align-items: end; height: 128px; margin: 14px 2px 0; } .tgx .dash__bar { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; } .tgx .dash__bar i { display: block; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--moss), var(--forest)); transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s var(--ease); } .tgx .dash__bar:nth-child(2) i { transition-delay: 0.1s; } .tgx .dash__bar:nth-child(3) i { transition-delay: 0.2s; } .tgx .dash__bar:nth-child(4) i { transition-delay: 0.3s; } .tgx .dash__bar:nth-child(5) i { transition-delay: 0.4s; } .tgx .dash__bar:nth-child(6) i { transition-delay: 0.5s; background: linear-gradient(180deg, var(--gold), var(--forest)); } .tgx .boxrow.in .dash__bar i, .tgx .reveal.in .dash__bar i { transform: scaleY(1); } @media (prefers-reduced-motion: reduce) { .tgx .dash__bar i { transform: scaleY(1) !important; transition: none; } } .tgx .dash__labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 7px 2px 0; text-align: center; font-family: var(--mono); font-size: 7px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); } .tgx .dash__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; border-top: 1px solid var(--ink-200); background: var(--cream-100); padding: 10px 18px; font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500); } .tgx .dash__foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(192, 150, 107, 0.7); animation: bcxPulse 1.8s ease-out infinite; flex: none; } /* ============================ 5. TESTIMONIAL (light) ============================ */ .tgx .tmn { background: var(--cream); color: var(--ink-900); padding: 110px 0; } .tgx .tmn__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 72px; align-items: start; margin-top: 42px; } .tgx .tmn__logo { height: 58px; width: auto; } .tgx .tmn__stats { display: flex; gap: 16px; margin: 34px 0; } .tgx .tmn__stat { background: var(--paper); border: 1px solid var(--ink-200); border-radius: 14px; padding: 18px 24px; min-width: 150px; } .tgx .tmn__stat .n { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--ink-900); line-height: 1; } .tgx .tmn__stat .n em { font-style: normal; color: var(--moss); } .tgx .tmn__stat .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); margin-top: 8px; } .tgx .tmn__quote { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 30px); font-style: italic; font-weight: 400; line-height: 1.35; color: var(--ink-800); } .tgx .tmn__attr { display: flex; align-items: center; gap: 16px; margin-top: 28px; } .tgx .tmn__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--paper); border: 1px solid var(--ink-200); } .tgx .tmn__avatar img { width: 100%; height: 100%; object-fit: cover; } .tgx .tmn__name { font-family: var(--ui); font-size: 14px; font-weight: 700; color: var(--ink-900); } .tgx .tmn__role { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); margin-top: 3px; } .tgx .tmn__right { display: flex; justify-content: flex-end; align-self: start; } /* Enlarged, top-aligned with the logo, bleeding past the right padding */ .tgx .tmn__medallion { width: min(560px, calc(100% + 48px)); flex: none; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 30px 70px rgba(26, 22, 19, 0.22); margin-right: -48px; background: transparent; } .tgx .tmn__medallion img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } /* ============================ 6. CTA ============================ */ .tgx .cta { background: var(--forest-800); color: var(--cream); padding: 110px 0; text-align: center; border-top: 1px solid var(--dark-line); } .tgx .cta h2 { color: var(--cream); max-width: 24ch; margin: 0 auto; } .tgx .cta p { color: rgba(246, 239, 226, 0.68); max-width: 56ch; margin: 20px auto 0; font-size: 16px; line-height: 1.6; } .tgx .cta__btn { display: inline-block; margin-top: 34px; background: var(--cream); color: var(--ink-900); text-decoration: none; font-family: var(--ui); font-size: 15px; font-weight: 600; padding: 16px 36px; border-radius: 999px; transition: transform 0.25s, background 0.25s; } .tgx .cta__btn:hover { background: #fff; transform: translateY(-2px); } .tgx .foot { background: var(--forest-900); border-top: 1px solid var(--dark-line); padding: 26px 0; text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(246, 239, 226, 0.4); } /* ========================================================================== SALIENT DEFENCE - inert in the standalone file; pins the declarations the .tgx theme's ID-scoped rules (#ajax-content-wrap img { height:auto }, button skins, paragraph rhythm) would otherwise beat once deployed. ========================================================================== */ .tgx button { -webkit-appearance: none; appearance: none; } .tgx .pudm__tab { margin: 0 !important; padding: 12px 8px 10px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-family: var(--ui) !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; min-width: 0 !important; color: var(--ink-500) !important; } .tgx .pudm__tab.on { color: var(--ink-900) !important; border-bottom-color: var(--forest) !important; background: var(--paper) !important; } .tgx .pudm-continue { width: 100% !important; margin: 13px 0 0 !important; padding: 13px !important; border: 0 !important; border-radius: 999px !important; background: var(--forest) !important; color: var(--cream) !important; box-shadow: none !important; font-family: var(--ui) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; line-height: 1.3 !important; } .tgx .pudm-continue:hover { background: var(--forest-600) !important; } .tgx .pudm * { box-sizing: border-box !important; } .pudm-day small, .pudm-day b, .pudm-day .mo, .pudm-slot, .pudm__hd, .tgx .pudm__steps span, .tgx .pudm-field label, .tgx .pudm-field b, .tgx .pudm-sel span { margin: 0 !important; } .tgx .pudm__hd { margin: 14px 0 8px !important; font-size: 15px !important; line-height: 1.2 !important; } .tgx .pudm__hd:first-child { margin-top: 0 !important; } .tgx .pudm__body { padding: 14px 16px 16px !important; } .tgx .pudm-cal { gap: 7px !important; margin: 0 !important; } .tgx .pudm-slots { gap: 7px !important; margin: 0 !important; } .tgx .pudm-day { padding: 8px 3px 7px !important; border-radius: 9px !important; margin: 0 !important; line-height: 1.15 !important; } .tgx .pudm-slot { padding: 8px 4px !important; border-radius: 8px !important; margin: 0 !important; line-height: 1.2 !important; font-size: 8px !important; letter-spacing: normal !important; min-height: 0 !important; } .tgx .pudm-field { padding: 8px 11px !important; border-radius: 9px !important; margin: 0 !important; } .tgx .pudm-sel { margin: 12px 0 0 !important; } .tgx .pudm-day b { font-size: 17px !important; line-height: 1 !important; } .tgx .pudm-day small, .tgx .pudm-day .mo { line-height: 1.1 !important; } .tgx .ck__opt { margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-family: var(--ui) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: normal !important; text-transform: none !important; line-height: 1.3 !important; padding: 9px 4px !important; min-width: 0 !important; } .tgx .ck__opt.on { background: var(--forest) !important; color: var(--cream) !important; } .tgx .ck__opt:not(.on) { background: var(--paper) !important; color: var(--ink-500) !important; } .tgx .ck__qty button { margin: 0 !important; padding: 0 !important; border-radius: 6px !important; background: var(--paper) !important; color: var(--ink-800) !important; box-shadow: none !important; line-height: 1 !important; min-width: 0 !important; } .tgx .ck__cta { width: 100% !important; margin: 11px 0 0 !important; padding: 11px !important; border: 0 !important; border-radius: 999px !important; background: var(--forest) !important; color: var(--cream) !important; box-shadow: none !important; font-family: var(--ui) !important; font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; line-height: 1.3 !important; } .tgx ul, .tgx ul li { list-style: none !important; } .tgx ul li::marker { content: none !important; } /* Layout container: Salient has its own .container rules under #ajax-content-wrap */ .tgx .container { max-width: 1240px !important; margin: 0 auto !important; padding: 0 48px !important; width: auto !important; } /* Headings/paragraphs: Salient adds margin AND padding rhythm - reset, then re-assert the intended spacing */ .tgx h1, .tgx h2, .tgx h3 { margin: 0 !important; padding: 0 !important; } .tgx .screens__hd h2 { margin: 18px 0 0 !important; } .tgx .dev__hd h2 { margin-top: 18px !important; } .tgx .boxrow h3 { margin: 14px 0 16px !important; } .tgx .cta h2 { margin: 0 auto !important; } .tgx .intro__main p { margin: 20px 0 0 !important; padding: 0 !important; } .tgx .intro__main p:first-of-type { margin-top: 34px !important; } .tgx .boxrow p { margin: 0 !important; padding: 0 !important; } .tgx .boxrow ul { margin: 18px 0 0 2px !important; padding: 0 !important; } .tgx .boxrow li { margin: 0 !important; padding: 0 0 0 26px !important; } .tgx .intro__meta li, .tgx .screens__hd li { margin: 0 !important; padding: 0 !important; } .tgx .screens__hd ul { margin: 12px 0 0 20px !important; padding: 0 !important; } .tgx .screens__lead { margin: 0 !important; padding: 0 !important; } .tgx .screens__hd p.body { margin: 16px 0 0 !important; padding: 0 !important; } .tgx .screens__hd .listlabel { margin: 22px 0 0 !important; padding: 0 !important; } .tgx .bigstat p { margin: 16px 0 0 !important; padding: 0 !important; } .tgx .tmn__quote { margin: 0 !important; padding: 0 !important; } .tgx .cta p { margin: 20px auto 0 !important; padding: 0 !important; } /* hr: Salient/WPBakery skin hrs with height + background */ .tgx hr { height: 0 !important; background: transparent !important; } /* Flickity arrows are