/* ========================================================================== TuniTag homepage blocks — shared stylesheet ========================================================================== Styles for the four homepage blocks: .tth hero .ttf "One App, Zero Compromise" .ttr "Your Road Ahead" .ttm "Supported Models / Covered Lineup" WHY A SHARED FILE. These styles used to be inlined in each block's HTML, which is stored per language in the database. With three languages that meant the same CSS existed twelve times, so every colour or spacing change had to be made twelve times and any miss produced a language that looked different from the others. The CSS now lives here, once, and the per-language files in prestashop/content/homepage-blocks/ contain markup only. Each block is scoped to its own root class and its own custom properties, so nothing here leaks into the theme and the blocks cannot collide with each other. Loaded from templates/_partials/head.tpl. Arabic (html[lang="ar"]) is handled at the end of this file. ========================================================================== */ /* ============================================================================ HERO (.tth-) ============================================================================ */ .tth, .tth *{ box-sizing:border-box; } .tth{ --tth-gold:#d4af37; --tth-gold-dim:rgba(212,175,55,.13); --tth-gold-line:rgba(212,175,55,.30); --tth-bg:#0a0a0a; --tth-card:#111111; --tth-line:#222222; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--tth-bg); overflow:hidden; padding:84px 0 72px; min-height:74vh; display:flex; align-items:center; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ---------- sliding background layers ---------- */ .tth-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .tth-grid{ position:absolute; inset:-2px; opacity:.5; background-image:linear-gradient(rgba(212,175,55,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(212,175,55,.06) 1px,transparent 1px); background-size:64px 64px; animation:tthGridDrift 34s linear infinite; mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 45%,#000 20%,transparent 78%); } @keyframes tthGridDrift{ to{ background-position:64px 64px, 64px 64px } } .tth-band{ position:absolute; top:-30%; bottom:-30%; width:38%; display:block; background:linear-gradient(90deg,transparent,rgba(212,175,55,.10),transparent); transform:translateX(-160%) skewX(-16deg); opacity:0; } .tth.is-in .tth-band{ animation:tthBand 9s cubic-bezier(.4,.1,.3,1) infinite; } .tth.is-in .tth-band:nth-child(3){ animation-delay:3.1s; } .tth.is-in .tth-band:nth-child(4){ animation-delay:6.2s; } @keyframes tthBand{ 0%{ transform:translateX(-160%) skewX(-16deg); opacity:0 } 14%{ opacity:1 } 72%{ opacity:1 } 100%{ transform:translateX(360%) skewX(-16deg); opacity:0 } } .tth-vignette{ position:absolute; inset:0; background:radial-gradient(ellipse 80% 70% at 50% 40%,transparent 30%,rgba(10,10,10,.75) 100%); } .tth-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:52px; width:100%; } /* ---------- copy ---------- */ .tth-copy{ flex:1 1 340px; min-width:290px; } .tth-badge{ display:inline-flex; align-items:center; gap:9px; padding:8px 18px; border-radius:60px; background:var(--tth-gold-dim); border:1px solid var(--tth-gold-line); color:var(--tth-gold); font-size:.78rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; margin-bottom:22px; opacity:0; transform:translateY(14px); } .tth.is-in .tth-badge{ animation:tthUp .7s .05s cubic-bezier(.22,.61,.36,1) forwards; } .tth-dot{ width:6px; height:6px; border-radius:50%; background:var(--tth-gold); box-shadow:0 0 10px rgba(212,175,55,.9); animation:tthPulse 2.4s ease-in-out infinite; } @keyframes tthPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.82) } } .tth h1{ color:#fff; font-family:Montserrat,sans-serif; font-weight:800; font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:1.06; letter-spacing:-1.4px; margin:0 0 20px; opacity:0; transform:translateY(18px); } .tth.is-in h1{ animation:tthUp .8s .12s cubic-bezier(.22,.61,.36,1) forwards; } .tth h1 em{ font-style:normal; color:var(--tth-gold); } .tth-sub{ color:#a4a4ac; font-size:clamp(.98rem,1.7vw,1.12rem); line-height:1.68; margin:0 0 32px; max-width:520px; opacity:0; transform:translateY(16px); } .tth.is-in .tth-sub{ animation:tthUp .8s .20s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes tthUp{ to{ opacity:1; transform:translateY(0) } } /* ---------- CTA reveal ---------- */ .tth-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:26px; } .tth-btn{ display:inline-flex; align-items:center; gap:10px; padding:16px 34px; border-radius:999px; font-family:Montserrat,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; border:1px solid transparent; opacity:0; transform:translateY(16px) scale(.97); transition:background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; } .tth.is-in .tth-btn{ animation:tthReveal .7s cubic-bezier(.22,.61,.36,1) forwards; } .tth.is-in .tth-btn:nth-child(1){ animation-delay:.30s; } .tth.is-in .tth-btn:nth-child(2){ animation-delay:.40s; } @keyframes tthReveal{ to{ opacity:1; transform:translateY(0) scale(1) } } .tth-btn-primary{ background:var(--tth-gold); color:#111; box-shadow:0 10px 30px rgba(212,175,55,.20); } .tth-btn-primary:hover{ background:#b29126; color:#111; transform:translateY(-3px); box-shadow:0 16px 38px rgba(212,175,55,.30); } .tth-btn-ghost{ background:transparent; color:var(--tth-gold); border-color:var(--tth-gold-line); } .tth-btn-ghost:hover{ background:var(--tth-gold-dim); border-color:var(--tth-gold); color:var(--tth-gold); transform:translateY(-3px); } /* ---------- store badges ---------- The hero's only CTA. Laid out like the official badges rather than like the site's own buttons: mark on the left, a small qualifier over a large store name on the right. A green pill saying "Get the app" would be louder and mean less — a store badge is a thing a reader already knows how to read, so the hero does not have to teach it. */ .tth-stores{ display:flex; flex-wrap:wrap; gap:13px; margin-bottom:26px; } .tth-store{ display:inline-flex; align-items:center; gap:13px; padding:12px 22px; background:#111; border:1px solid #2b2b2b; border-radius:14px; color:#fff; text-decoration:none; opacity:0; transform:translateY(16px) scale(.97); transition:background .25s, border-color .25s, transform .25s, box-shadow .25s; } .tth.is-in .tth-store{ animation:tthReveal .7s cubic-bezier(.22,.61,.36,1) forwards; } .tth.is-in .tth-store:nth-child(1){ animation-delay:.30s; } .tth.is-in .tth-store:nth-child(2){ animation-delay:.40s; } .tth-store:hover{ background:#161616; border-color:var(--tth-gold-line); color:#fff; transform:translateY(-3px); box-shadow:0 16px 38px rgba(0,0,0,.55); } .tth-store i{ font-size:26px; line-height:1; width:26px; text-align:center; color:#fff; } .tth-store em{ display:block; font-style:normal; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; color:#8d8d95; } .tth-store b{ display:block; font-family:Montserrat,sans-serif; font-size:1rem; font-weight:700; margin-top:2px; } /* ---------- trust chips ---------- */ .tth-trust{ display:flex; flex-wrap:wrap; gap:9px 18px; opacity:0; transform:translateY(12px); } .tth.is-in .tth-trust{ animation:tthUp .8s .52s cubic-bezier(.22,.61,.36,1) forwards; } .tth-trust span{ display:inline-flex; align-items:center; gap:7px; color:#8d8d95; font-size:.8rem; font-weight:500; letter-spacing:.2px; } .tth-trust svg{ flex-shrink:0; } /* ---------- art: rings + 3D parallax layers ---------- */ .tth-art{ flex:0 1 340px; min-width:250px; display:flex; justify-content:center; perspective:1200px; position:relative; } /* The stage is a single-cell grid: every layer is stacked in the same cell, so nothing is taken out of flow and the stage keeps a real height. Using grid-area instead of absolute positioning also leaves each layer's transform free for the parallax script to drive. */ .tth-stage{ display:grid; width:330px; max-width:100%; height:470px; transform-style:preserve-3d; } .tth-stage > *{ grid-area:1 / 1; min-width:0; } /* Hero orbit rings — drawn in CSS, never in markup. The rings were originally an inline with six children. The Back Office editor strips inline SVG: of 30 circles in the source, 2 reached the live page, and the ring container arrived empty. A data URI inside this stylesheet cannot be stripped, so the decoration is now safe by construction. Same shape, same radii, same dash offsets as the original. Layer map: .tth-ring-wrap 3 static track rings .tth-ring-wrap::before all 3 gold arcs, rotating slowly .tth-ring-wrap::after one outer arc, rotating the other way */ .tth-ring-wrap{ position:relative; place-self:center; pointer-events:none; width:min(390px,92vw); aspect-ratio:1/1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' fill='none'%3E%3Ccircle cx='170' cy='170' r='164' stroke='rgba(212,175,55,.12)' stroke-width='1.3'/%3E%3Ccircle cx='170' cy='170' r='138' stroke='rgba(212,175,55,.12)' stroke-width='1.3'/%3E%3Ccircle cx='170' cy='170' r='112' stroke='rgba(212,175,55,.12)' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat; } .tth-ring-wrap::before, .tth-ring-wrap::after{ content:""; position:absolute; inset:0; opacity:.9; background-position:center; background-repeat:no-repeat; background-size:contain; will-change:transform; } .tth-ring-wrap::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='170' cy='170' r='164' stroke-dasharray='170 860'/%3E%3Ccircle cx='170' cy='170' r='138' stroke-dasharray='120 747'/%3E%3Ccircle cx='170' cy='170' r='112' stroke-dasharray='62 642'/%3E%3C/svg%3E"); } .tth-ring-wrap::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='170' cy='170' r='164' stroke-dasharray='54 977'/%3E%3C/svg%3E"); } .tth.is-in .tth-ring-wrap::before{ animation:tthSpin 11s linear infinite; } .tth.is-in .tth-ring-wrap::after{ animation:tthSpin 16s linear infinite reverse; } @keyframes tthSpin{ to{ transform:rotate(360deg) } } /* Glow and floor shadow. These used a bare child, and the editor drops classless empty elements (5 of 9 were removed site-wide), so they are drawn as pseudo-elements on the container instead. */ .tth-glow-layer{ display:grid; place-items:center; pointer-events:none; } .tth-glow-layer::before{ content:""; width:78%; height:78%; border-radius:50%; display:block; background:radial-gradient(circle,rgba(212,175,55,.20) 0%,rgba(212,175,55,.05) 42%,transparent 70%); filter:blur(14px); } /* ---------- the app ---------- One element, and it must stay one element. The parallax script writes this layer's transform wholesale on every pointer move, so a rotation declared in this rule would be overwritten the moment the mouse moved. The hero is therefore left with no tilt to lose. */ .tth-phone{ display:grid; place-items:center; } .tth-phone img{ width:250px; height:auto; max-width:100%; display:block; filter:drop-shadow(0 0 26px rgba(212,175,55,.26)); } .tth-shadow{ display:grid; place-items:end center; pointer-events:none; } .tth-shadow::before{ content:""; width:62%; height:20px; border-radius:50%; display:block; margin-bottom:-6px; background:radial-gradient(ellipse at center,rgba(212,175,55,.26),transparent 72%); filter:blur(9px); } /* ---------- scroll cue ---------- The colour is #8d8d95, the same tone the trust chips above use, and not the #5c5c64 this started as. That measured 2.99:1 on the hero's #0a0a0a — the only contrast failure in the whole block set, and on the first thing a visitor sees. 0.62rem is far below the 18.66px large-text exemption, so the full 4.5:1 bar applies to it; #8d8d95 measures 5.85:1. */ .tth-cue{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:7px; color:#8d8d95; font-size:.62rem; letter-spacing:2.4px; text-transform:uppercase; z-index:2; opacity:0; } .tth.is-in .tth-cue{ animation:tthUp 1s 1s forwards; } .tth-cue::after{ content:""; width:1px; height:34px; display:block; background:linear-gradient(to bottom,var(--tth-gold),transparent); } @media (prefers-reduced-motion:reduce){ .tth-band,.tth-grid,.tth-dot,.tth-ring-wrap::before,.tth-ring-wrap::after{ animation:none !important; } .tth-badge,.tth h1,.tth-sub,.tth-btn,.tth-store,.tth-trust,.tth-cue{ animation:none !important; opacity:1 !important; transform:none !important; } } @media (max-width:860px){ .tth{ padding:60px 0 62px; min-height:0; } .tth-art{ order:-1; } .tth-stage{ width:230px; } .tth-phone img{ width:200px; } .tth-cue{ display:none; } .tth-btn,.tth-store{ flex:1 1 100%; justify-content:center; } } /* ---------- no-JS safety net ---------- Everything below relies on JS to add the reveal class. If scripting is unavailable the content must still be visible, not stuck at opacity 0. */ @media (scripting: none){ .tth-badge,.tth h1,.tth-sub,.tth-btn,.tth-store,.tth-trust,.tth-cue{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ============================================================================ "ONE APP, ZERO COMPROMISE" (.ttf-) ============================================================================ */ /* ---------- scoped reset ---------- */ .ttf, .ttf *{ box-sizing: border-box; } .ttf{ --ttf-gold:#d4af37; --ttf-gold-dim:rgba(212,175,55,.14); --ttf-gold-line:rgba(212,175,55,.28); --ttf-page:#0a0a0a; --ttf-card:#111111; --ttf-card-2:#141414; --ttf-line:#222222; --ttf-text:#ffffff; --ttf-body:#9a9a9a; --ttf-mute:#6a6a6a; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttf-page); padding:96px 0 88px; overflow:hidden; border-top:1px solid #161616; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ---------- sliding background reveal ---------- */ .ttf-bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; } .ttf-bg i{ position:absolute; top:0; bottom:0; width:46%; display:block; background:linear-gradient(90deg,transparent,rgba(212,175,55,.07),transparent); transform:translateX(-140%) skewX(-14deg); opacity:0; } .ttf.is-in .ttf-bg i{ animation:ttfSlide 2.6s cubic-bezier(.22,.61,.36,1) forwards; } .ttf.is-in .ttf-bg i:nth-child(2){ animation-delay:.35s; } @keyframes ttfSlide{ 0%{ transform:translateX(-140%) skewX(-14deg); opacity:0 } 18%{ opacity:1 } 100%{ transform:translateX(340%) skewX(-14deg); opacity:0 } } .ttf-glow{ position:absolute; left:50%; top:44%; width:760px; height:760px; margin:-380px 0 0 -380px; background:radial-gradient(circle,rgba(212,175,55,.10) 0%,rgba(212,175,55,.03) 38%,transparent 68%); pointer-events:none; } .ttf-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 20px; z-index:2; } /* ---------- header ---------- */ .ttf-head{ text-align:center; margin-bottom:64px; } .ttf-eyebrow{ color:var(--ttf-gold); font-family:Montserrat,sans-serif; font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:12px; } .ttf h2.ttf-title{ color:#fff; font-family:Montserrat,sans-serif; font-size:clamp(1.75rem,4.4vw,2.8rem); font-weight:800; margin:0; text-transform:uppercase; line-height:1.12; letter-spacing:-.5px; } .ttf-rule{ width:78px; height:3px; margin:20px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--ttf-gold),transparent); transform:scaleX(0); opacity:0; } .ttf.is-in .ttf-rule{ animation:ttfRule .9s .25s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes ttfRule{ to{ transform:scaleX(1); opacity:1 } } /* ---------- layout ---------- */ .ttf-stage{ display:flex; flex-wrap:wrap; align-items:center; gap:36px; } .ttf-col{ flex:1 1 280px; min-width:260px; display:flex; flex-direction:column; gap:20px; } .ttf-mid{ flex:0 1 300px; min-width:250px; display:flex; justify-content:center; } /* ---------- feature cards ---------- */ .ttf-card{ padding:22px 24px; background:var(--ttf-card); border:1px solid var(--ttf-line); border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s, background .35s; opacity:0; transform:translateY(22px); } .ttf.is-in .ttf-card{ animation:ttfCard .7s cubic-bezier(.22,.61,.36,1) forwards; } .ttf.is-in .ttf-card:nth-child(1){ animation-delay:.10s } .ttf.is-in .ttf-card:nth-child(2){ animation-delay:.18s } .ttf.is-in .ttf-card:nth-child(3){ animation-delay:.26s } .ttf.is-in .ttf-card:nth-child(4){ animation-delay:.34s } @keyframes ttfCard{ to{ opacity:1; transform:translateY(0) } } .ttf-card:hover{ transform:translateY(-5px); border-color:var(--ttf-gold-line); background:var(--ttf-card-2); box-shadow:0 18px 40px rgba(0,0,0,.6); } .ttf-card h3{ color:var(--ttf-gold); font-family:Montserrat,sans-serif; margin:0 0 9px; font-size:1.06rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; display:flex; align-items:center; gap:11px; } .ttf-card h3 svg{ flex-shrink:0; } .ttf-card p{ color:var(--ttf-body); font-size:.92rem; line-height:1.62; margin:0; } .ttf-card p b{ color:#cfcfcf; font-weight:600; } /* ---------- phone: ring loader + 3D parallax ---------- */ .ttf-phone{ position:relative; perspective:1100px; width:100%; max-width:290px; display:flex; align-items:center; justify-content:center; } /* Cockpit rings — CSS, not markup, for the same reason as the hero rings: the original inline was stripped by the Back Office editor. */ .ttf-rings{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none'%3E%3Ccircle cx='150' cy='150' r='140' stroke='rgba(212,175,55,.13)' stroke-width='1.4'/%3E%3Ccircle cx='150' cy='150' r='118' stroke='rgba(212,175,55,.13)' stroke-width='1.4'/%3E%3Ccircle cx='150' cy='150' r='96' stroke='rgba(212,175,55,.13)' stroke-width='1.4'/%3E%3C/svg%3E") center/118% auto no-repeat; } .ttf-rings::before, .ttf-rings::after{ content:""; position:absolute; inset:0; opacity:.85; background-position:center; background-repeat:no-repeat; background-size:118% auto; will-change:transform; } .ttf-rings::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23d4af37' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='150' cy='150' r='140' stroke-dasharray='150 730'/%3E%3Ccircle cx='150' cy='150' r='118' stroke-dasharray='90 650'/%3E%3Ccircle cx='150' cy='150' r='96' stroke-dasharray='48 555'/%3E%3C/svg%3E"); } .ttf-rings::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' fill='none' stroke='%23d4af37' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='150' cy='150' r='118' stroke-dasharray='62 680'/%3E%3C/svg%3E"); } .ttf.is-in .ttf-rings::before{ animation:ttfSpin 9s linear infinite; } .ttf.is-in .ttf-rings::after{ animation:ttfSpin 14s linear infinite reverse; } @keyframes ttfSpin{ to{ transform:rotate(360deg) } } .ttf-tilt{ position:relative; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.22,.61,.36,1); will-change:transform; } .ttf-tilt img{ display:block; width:250px; height:auto; max-width:100%; filter:drop-shadow(0 0 22px rgba(212,175,55,.22)); transform:translateZ(42px); } .ttf-tilt::after{ content:""; position:absolute; inset:auto 6% -16px; height:26px; border-radius:50%; background:radial-gradient(ellipse at center,rgba(212,175,55,.22),transparent 70%); filter:blur(9px); transform:translateZ(-20px); } /* ---------- CTA row ---------- */ .ttf-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center; margin-top:60px; } .ttf-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:999px; font-family:Montserrat,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; border:1px solid transparent; transition:transform .25s, background .25s, border-color .25s, color .25s; } .ttf-btn-primary{ background:var(--ttf-gold); color:#111; } .ttf-btn-primary:hover{ background:#b29126; color:#111; transform:translateY(-2px); } .ttf-btn-ghost{ background:transparent; color:var(--ttf-gold); border-color:var(--ttf-gold-line); } .ttf-btn-ghost:hover{ background:var(--ttf-gold-dim); border-color:var(--ttf-gold); color:var(--ttf-gold); transform:translateY(-2px); } /* ---------- extra features strip ---------- */ .ttf-strip{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:44px; } .ttf-chip{ display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:999px; background:var(--ttf-gold-dim); border:1px solid var(--ttf-gold-line); color:#fff; font-size:.76rem; font-weight:600; letter-spacing:.5px; } /* The chip is split: the short label is gold, the detail is white. Seven chips of solid gold read as one undifferentiated block and the eye had nothing to land on; the split gives each chip a head word. The gold half is always the shorter one, so the split survives translation. */ .ttf-chip b{ color:var(--ttf-gold); font-weight:800; } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ .ttf-bg i,.ttf-rule,.ttf-card{ animation:none !important; opacity:1 !important; transform:none !important; } .ttf-rings::before,.ttf-rings::after{ animation:none !important; } .ttf-card{ opacity:1; transform:none; } .ttf-rule{ transform:scaleX(1); opacity:1; } } @media (max-width:820px){ .ttf{ padding:70px 0 62px; } .ttf-mid{ order:-1; } .ttf-card{ padding:20px; } } /* ---------- no-JS safety net ---------- Everything below relies on JS to add the reveal class. If scripting is unavailable the content must still be visible, not stuck at opacity 0. */ @media (scripting: none){ .ttf-card,.ttf-rule{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ============================================================================ "YOUR ROAD AHEAD" (.ttr-) ============================================================================ */ .ttr, .ttr *{ box-sizing:border-box; } .ttr{ --ttr-gold:#d4af37; --ttr-gold-dim:rgba(212,175,55,.12); --ttr-gold-line:rgba(212,175,55,.28); /* Pending state: the same brand gold, dimmed. Derived from --ttr-gold rather than a second hex so the roadmap cannot drift off-brand again. Lifted from .66 because these two labels — "Next up" and "In development" — are now the status of the milestones the condensed section actually shows, and at .66 they measured 4.49:1 against the card, a hair under AA. */ --ttr-gold-soft:rgba(212,175,55,.72); --ttr-page:#0a0a0a; --ttr-card:#111111; --ttr-line:#222222; /* --ttr-mute carries the "Then" / "Later" chips and the rail's unlit "THEN". At #6a6a6a those measured 3.49:1 on the card, well under AA for text this size. It is now the same value as the page-level --mute further down, which clears AA on both the card and the rail and keeps the two tokens from drifting apart. */ --ttr-body:#b0b0b8; --ttr-mute:#8a8a8a; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttr-page); padding:92px 0 84px; overflow:hidden; border-top:1px solid #1a1a1a; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .ttr-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 24px; z-index:2; } /* ---------- header ---------- */ .ttr-head{ text-align:center; margin-bottom:52px; } .ttr-pill{ background:var(--ttr-gold-dim); border:1px solid var(--ttr-gold-line); padding:8px 24px; border-radius:60px; font-size:.78rem; font-weight:800; color:var(--ttr-gold); letter-spacing:1.5px; display:inline-block; text-transform:uppercase; } .ttr h2.ttr-title{ color:#fff; font-family:Montserrat,sans-serif; font-size:clamp(1.9rem,4.6vw,3rem); font-weight:800; margin:22px 0 14px; letter-spacing:-1px; line-height:1.1; } .ttr h2.ttr-title span{ color:var(--ttr-gold); } .ttr-lede{ color:#aaa; font-size:1.02rem; margin:0 auto; max-width:700px; line-height:1.55; } /* ---------- progress rail ---------- */ .ttr-rail{ position:relative; margin-bottom:74px; padding:0 10px; } .ttr-rail-track{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .ttr-seg{ flex:1; height:3px; background:#1e1e1e; position:relative; overflow:hidden; border-radius:2px; } .ttr-seg::before{ content:""; position:absolute; inset:0; display:block; transform:scaleX(0); transform-origin:left; background:linear-gradient(90deg,#8a6f1f,var(--ttr-gold)); } .ttr.is-in .ttr-seg::before{ animation:ttrFill 1s cubic-bezier(.22,.61,.36,1) forwards; } .ttr.is-in .ttr-seg:nth-child(1)::before{ animation-delay:.10s } .ttr.is-in .ttr-seg:nth-child(2)::before{ animation-delay:.26s } .ttr.is-in .ttr-seg:nth-child(3)::before{ animation-delay:.42s } .ttr.is-in .ttr-seg:nth-child(4)::before{ animation-delay:.58s } .ttr-seg.ttr-done::before{ background:linear-gradient(90deg,#8a6f1f,var(--ttr-gold)); } .ttr-seg.ttr-part::before{ background:linear-gradient(90deg,rgba(212,175,55,.55),rgba(212,175,55,.18)); } @keyframes ttrFill{ to{ transform:scaleX(1) } } .ttr-seg b{ position:absolute; top:-30px; left:0; font-size:.75rem; font-weight:800; letter-spacing:.5px; color:var(--ttr-mute); white-space:nowrap; } .ttr-seg.ttr-done b, .ttr-seg.ttr-part b{ color:var(--ttr-gold); } /* ---------- spine ---------- A pseudo-element on the stops container, not an element of its own. It used to be a sibling absolutely positioned at top:330px/bottom:160px inside .ttr, which only lined up while the section had all seven cards. Anchored to the container it spans exactly the cards, open or closed. */ .ttr-stops{ position:relative; } .ttr-stops::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%); background:linear-gradient(to bottom,var(--ttr-gold) 0%,#2a2a2a 55%,transparent 100%); z-index:1; } /* Spine traveller. The original was a bare , which the editor drops, so it is a pseudo-element here. */ .ttr-stops::after{ content:""; position:absolute; left:calc(50% - 2px); width:6px; height:6px; border-radius:50%; background:var(--ttr-gold); box-shadow:0 0 12px rgba(212,175,55,.9); animation:ttrTraveller 7s linear infinite; z-index:1; } @keyframes ttrTraveller{ 0%{ top:0; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ top:100%; opacity:0 } } /* ---------- stops ---------- */ .ttr-stop{ display:flex; width:100%; margin-bottom:44px; position:relative; z-index:2; } .ttr-stop.ttr-left{ justify-content:flex-start; } .ttr-stop.ttr-right{ justify-content:flex-end; } .ttr-card{ width:45%; background:var(--ttr-card); border:1px solid var(--ttr-line); border-radius:24px; padding:26px; box-shadow:0 10px 30px rgba(0,0,0,.5); opacity:0; transform:translateY(22px); transition:border-color .35s, box-shadow .35s; } /* THE CARDS RISE. THEY USED TO ARRIVE FROM THE SIDES. They translatedX(±28px), alternating left and right to echo the zig-zag of the stops. That read well while this was the only animated thing on the page. It does not read well now: every other section on the page rises by the same 22px with the same curve, so a section that arrives sideways in the middle of that sequence looks like it was designed for a different site. The zig-zag LAYOUT is untouched — only the direction of arrival is, and it is now the same rise, duration and stagger as .ttw-rv. The two rules that carried the sideways offset are gone with it, and that removes a declaration that never once applied: the base rule said translateY(26px) and both .ttr-left and .ttr-right overrode it, so no card on this page ever used the translateY it declares. `transform .35s` also left the transition list. It was already dead — .ttr-card:hover changes border and shadow only, never transform — and leaving a transform transition beside an animation that writes transform is the confusion the .ttw-rv comment above exists to prevent. */ .ttr.is-in .ttr-stop .ttr-card{ animation:ttrIn .72s cubic-bezier(.22,.61,.36,1) forwards; } .ttr.is-in .ttr-stop:nth-child(1) .ttr-card{ animation-delay:.05s } .ttr.is-in .ttr-stop:nth-child(2) .ttr-card{ animation-delay:.13s } .ttr.is-in .ttr-stop:nth-child(3) .ttr-card{ animation-delay:.21s } .ttr.is-in .ttr-stop:nth-child(4) .ttr-card{ animation-delay:.29s } .ttr.is-in .ttr-stop:nth-child(5) .ttr-card{ animation-delay:.37s } .ttr.is-in .ttr-stop:nth-child(6) .ttr-card{ animation-delay:.45s } .ttr.is-in .ttr-stop:nth-child(7) .ttr-card{ animation-delay:.53s } @keyframes ttrIn{ to{ opacity:1; transform:none } } .ttr-card:hover{ border-color:var(--ttr-gold-line); box-shadow:0 20px 46px rgba(0,0,0,.62); } .ttr-card.ttr-active{ border-color:var(--ttr-gold); } .ttr-top{ display:flex; align-items:center; gap:15px; margin-bottom:14px; } .ttr-icon{ background-color:rgba(255,255,255,.03); width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border:1px solid #222; background-repeat:no-repeat; background-position:center; background-size:24px 24px; } .ttr-card.ttr-active .ttr-icon{ background-color:var(--ttr-gold-dim); border-color:var(--ttr-gold-line); } /* One icon per milestone, chosen by CLASS rather than by position. The original inline icons were stripped by the Back Office editor (the -based ones vanished entirely), so they are data URIs in this stylesheet instead. They were keyed on nth-child, which stopped working the moment five of the cards moved inside a
— they are no longer children of .ttr-stops, so a positional rule cannot see them. A class travels with the card — and it also survives a card being hidden, which is what kept this workable when the Mercedes card was removed and the rest reordered. A positional rule would have re-drawn every icon on the page from the wrong position and looked, to a reviewer, like a set of icons that had simply been chosen badly. .ttr-icon--merc is gone with its card. */ .ttr-icon.ttr-icon--app{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2' width='12' height='20' rx='2.5'/%3E%3Cpath d='M9.2 12.2l2.1 2.1 3.6-4.1'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--map{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--diag{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--data{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--obd{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7V5h10v2'/%3E%3Cpath d='M7 17v2h10v-2'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--perf{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20a8 8 0 1 0-8-8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3Cpath d='M4 12H2'/%3E%3C/svg%3E"); } .ttr-icon.ttr-icon--market{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-6 9 6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E"); } .ttr-meta{ min-width:0; flex:1; } .ttr-meta h3{ color:#fff; font-family:Montserrat,sans-serif; font-size:1.14rem; font-weight:700; margin:0 0 5px; } .ttr-status{ font-size:.76rem; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ttr-mute); } .ttr-status.ttr-s-done{ color:var(--ttr-gold); } .ttr-status.ttr-s-dev{ color:var(--ttr-gold-soft); } .ttr-card p{ color:var(--ttr-body); font-size:.88rem; line-height:1.62; margin:0; } .ttr-card p b{ color:#d8d8d8; font-weight:600; } /* ---------- the rest of the roadmap, behind a disclosure ---------- The four milestones that used to be cards 4-7.
rather than a script: needs no JS, is keyboard-operable and accessible by default, and cannot be broken by a paste. */ .ttr-more{ position:relative; z-index:2; margin-top:6px; } /* The button's bottom margin belongs to the open state only. Left on the summary while closed it is 44px of empty space at the end of the section — the button would appear to float above nothing. */ .ttr-more > summary{ display:flex; align-items:center; justify-content:center; gap:11px; width:max-content; margin:0 auto; padding:14px 30px; border-radius:999px; cursor:pointer; list-style:none; background:transparent; border:1px solid var(--ttr-gold-line); font-family:Montserrat,sans-serif; font-weight:700; font-size:.8rem; letter-spacing:1.4px; text-transform:uppercase; color:var(--ttr-gold); transition:background .25s, border-color .25s, transform .25s; } .ttr-more > summary::-webkit-details-marker{ display:none; } .ttr-more > summary:hover{ background:var(--ttr-gold-dim); border-color:var(--ttr-gold); transform:translateY(-2px); } .ttr-more > summary:focus-visible{ outline:2px solid var(--ttr-gold); outline-offset:3px; } .ttr-more > summary::after{ content:'\f078'; font-family:FontAwesome; font-weight:400; font-size:.7rem; transition:transform .28s cubic-bezier(.22,.61,.36,1); } .ttr-more[open] > summary::after{ transform:rotate(180deg); } .ttr-more[open] > summary{ margin-bottom:40px; } /* The cards inside are forced visible and un-animated. While the details is closed they are not rendered, and an entrance animation that may not re-run on open would leave them at opacity 0 — an expanded "full roadmap" that renders blank. The disclosure itself is the motion. */ .ttr .ttr-more .ttr-stop .ttr-card{ opacity:1; transform:none; animation:none; } /* ---------- ring loader (decorative) ---------- The original was an inline with children, all of which the Back Office editor stripped. Rebuilt with data URIs: a static track plus a rotating arc, both pseudo-elements. The -90deg start matches the original so the arc begins at the top. */ .ttr-ring{ position:relative; width:52px; height:52px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'%3E%3Ccircle cx='22' cy='22' r='20' stroke='%23232323' stroke-width='4'/%3E%3C/svg%3E") center/44px 44px no-repeat; } .ttr-ring::after{ content:""; position:absolute; inset:4px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' fill='none'%3E%3Ccircle cx='22' cy='22' r='20' stroke='%23d4af37' stroke-width='4' stroke-linecap='round' stroke-dasharray='38 88'/%3E%3C/svg%3E") center/cover no-repeat; transform:rotate(-90deg); will-change:transform; } .ttr.is-in .ttr-ring::after{ animation:ttrRingSpin 3.2s linear infinite; } @keyframes ttrRingSpin{ from{ transform:rotate(-90deg) } to{ transform:rotate(270deg) } } /* ---------- CTA ---------- */ .ttr-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:20px; } .ttr-btn{ display:inline-flex; align-items:center; gap:10px; padding:15px 32px; border-radius:999px; font-family:Montserrat,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.4px; text-transform:uppercase; text-decoration:none; border:1px solid transparent; transition:transform .25s, background .25s, border-color .25s; } .ttr-btn-primary{ background:var(--ttr-gold); color:#111; } .ttr-btn-primary:hover{ background:#b29126; color:#111; transform:translateY(-2px); } .ttr-btn-ghost{ background:transparent; color:var(--ttr-gold); border-color:var(--ttr-gold-line); } .ttr-btn-ghost:hover{ background:var(--ttr-gold-dim); border-color:var(--ttr-gold); transform:translateY(-2px); } @media (prefers-reduced-motion:reduce){ .ttr-seg::before,.ttr-card,.ttr-ring::after,.ttr-stops::after{ animation:none !important; } .ttr-seg::before{ transform:scaleX(1); opacity:1; } .ttr-card{ opacity:1; transform:none; } .ttr-ring::after{ animation:none !important; } .ttr-stops::after{ display:none; } } @media (max-width:860px){ .ttr{ padding:70px 0 64px; } .ttr-stops::before, .ttr-stops::after{ display:none; } .ttr-stop, .ttr-stop.ttr-left, .ttr-stop.ttr-right{ justify-content:center; } .ttr-card{ width:100%; } .ttr-rail-track{ gap:8px; } .ttr-seg b{ font-size:.78rem; top:-26px; } } /* ---------- no-JS safety net ---------- Everything below relies on JS to add the reveal class. If scripting is unavailable the content must still be visible, not stuck at opacity 0. */ @media (scripting: none){ .ttr-card,.ttr-seg::before{ animation:none !important; opacity:1 !important; transform:none !important; } .ttr-seg::before{ transform:scaleX(1) !important; } } /* ============================================================================ "SUPPORTED MODELS / COVERED LINEUP" (.ttm-) ============================================================================ */ .ttm, .ttm *{ box-sizing:border-box; } .ttm{ --ttm-gold:#d4af37; --ttm-gold-dim:rgba(212,175,55,.13); --ttm-gold-line:rgba(212,175,55,.28); --ttm-bg:#080808; --ttm-card:#111111; --ttm-line:#1c1c1c; --ttm-body:#aaaaaa; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttm-bg); padding:96px 0 84px; overflow:hidden; border-top:1px solid #111; border-bottom:1px solid #111; font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } .ttm-inner{ position:relative; max-width:1400px; margin:0 auto; padding:0 40px; z-index:2; } /* ---------- header ---------- */ .ttm-head{ text-align:center; margin-bottom:48px; } .ttm-eyebrow{ color:var(--ttm-gold); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:12px; } .ttm h2.ttm-title{ color:#fff; font-size:clamp(1.55rem,4vw,2.6rem); font-weight:800; margin:0; text-transform:uppercase; line-height:1.2; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; } .ttm h2.ttm-title img{ width:20px; height:20px; vertical-align:middle; } .ttm-rule{ width:78px; height:3px; margin:20px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--ttm-gold),transparent); transform:scaleX(0); opacity:0; } .ttm.is-in .ttm-rule{ animation:ttmRule .9s .2s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes ttmRule{ to{ transform:scaleX(1); opacity:1 } } /* ---------- tabs ---------- */ .ttm-tabs{ position:relative; display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:36px; } .ttm-tab{ appearance:none; -webkit-appearance:none; cursor:pointer; padding:14px 24px; background:transparent; color:var(--ttm-gold); font-family:inherit; font-weight:600; font-size:.85rem; text-transform:uppercase; letter-spacing:1px; border:1px solid var(--ttm-line); border-radius:6px; transition:background .3s, color .3s, border-color .3s, transform .25s; } .ttm-tab:hover{ border-color:var(--ttm-gold-line); transform:translateY(-2px); } .ttm-tab:focus-visible{ outline:2px solid var(--ttm-gold); outline-offset:3px; } .ttm-tab[aria-selected="true"]{ background:var(--ttm-gold); color:#000; border-color:var(--ttm-gold); } /* The count beside each tab label. It is the one number that tells a reader whether their car is likely to be behind a tab before they open it — and "SUVs 7" is a smaller ask than five tabs with no sizes. Dimmed against the gold label so it reads as a count and not as part of the name, and it inverts with the selected tab because the whole button becomes gold. */ .ttm-tab .ttm-tab-n{ display:inline-block; margin-inline-start:8px; padding:1px 7px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.4px; color:var(--ttm-gold); background:rgba(212,175,55,.12); border:1px solid var(--ttm-gold-line); font-variant-numeric:tabular-nums; } .ttm-tab[aria-selected="true"] .ttm-tab-n{ color:#000; background:rgba(0,0,0,.16); border-color:rgba(0,0,0,.28); } .ttm.is-in .ttm-tab{ animation:ttmTabIn .6s cubic-bezier(.22,.61,.36,1) backwards; } .ttm.is-in .ttm-tab:nth-child(1){ animation-delay:.06s } .ttm.is-in .ttm-tab:nth-child(2){ animation-delay:.12s } .ttm.is-in .ttm-tab:nth-child(3){ animation-delay:.18s } .ttm.is-in .ttm-tab:nth-child(4){ animation-delay:.24s } .ttm.is-in .ttm-tab:nth-child(5){ animation-delay:.30s } @keyframes ttmTabIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } } /* ---------- panels ---------- */ .ttm-panel{ background:var(--ttm-card); border:1px solid var(--ttm-line); border-radius:16px; padding:40px; } .ttm-panel[hidden]{ display:none; } .ttm-panel.ttm-entering{ animation:ttmPanelIn .55s cubic-bezier(.22,.61,.36,1) both; } @keyframes ttmPanelIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:translateY(0) } } .ttm-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; color:var(--ttm-body); font-size:.9rem; line-height:1.8; } .ttm-item{ opacity:0; transform:translateY(14px); padding:14px 16px; border-radius:12px; border:1px solid transparent; transition:border-color .3s, background .3s, transform .3s; } .ttm-panel.ttm-entering .ttm-item{ animation:ttmItem .55s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes ttmItem{ to{ opacity:1; transform:translateY(0) } } .ttm-item:hover{ border-color:var(--ttm-gold-line); background:rgba(255,255,255,.02); } .ttm-item strong{ color:var(--ttm-gold); display:block; font-size:1.05rem; margin-bottom:4px; font-weight:700; } /* ---------- footer ---------- */ .ttm-cta{ margin-top:36px; padding:26px 28px; border-radius:16px; text-align:center; background:var(--ttm-gold-dim); border:1px solid var(--ttm-gold-line); } .ttm-cta p{ color:#c9c9cf; font-size:.92rem; margin:0 0 16px; font-family:Inter,sans-serif; } .ttm-cta a{ display:inline-flex; align-items:center; gap:9px; padding:13px 28px; border-radius:999px; background:var(--ttm-gold); color:#111 !important; text-decoration:none; font-weight:700; font-size:.78rem; letter-spacing:1.3px; text-transform:uppercase; transition:background .25s, transform .25s; } .ttm-cta a:hover{ background:#b29126; color:#111 !important; transform:translateY(-2px); } .ttm-disclaimer{ margin-top:32px; padding:0 20px; text-align:center; color:#666; font-size:.75rem; line-height:1.5; opacity:.8; font-family:Inter,sans-serif; } .ttm-disclaimer strong{ color:#8a8a90; } @media (prefers-reduced-motion:reduce){ .ttm-rule,.ttm-tab,.ttm-panel.ttm-entering,.ttm-panel.ttm-entering .ttm-item{ animation:none !important; } .ttm-rule{ transform:scaleX(1); opacity:1; } .ttm-item{ opacity:1; transform:none; } } @media (max-width:700px){ .ttm{ padding:70px 0 60px; } .ttm-inner{ padding:0 20px; } .ttm-panel{ padding:26px 20px; } .ttm-tab{ flex:1 1 44%; padding:12px 14px; font-size:.76rem; } } /* ---------- no-JS safety net ---------- Everything below relies on JS to add the reveal class. If scripting is unavailable the content must still be visible, not stuck at opacity 0. */ @media (scripting: none){ .ttm-rule,.ttm-item{ animation:none !important; opacity:1 !important; transform:none !important; } } /* ========================================================================== ARABIC / RTL ========================================================================== Arabic is served at /ar/ as . Three things the LTR styling gets wrong in Arabic: 1. letter-spacing. Arabic is a cursive script — letters within a word are joined to each other. Positive letter-spacing inserts gaps INSIDE those joins and visually breaks the words apart. Tracking is a Latin device, so inside the homepage blocks it is reset to `normal` for every element. (`text-transform:uppercase` is a no-op for Arabic and is left alone.) The descendant reset is deliberate: it cannot miss a class. 2. Font. Matches the Arabic stack the site declares (Tajawal), which head.tpl now actually loads. Without this the Arabic falls back to whatever font the visitor's device happens to have, so the site looks different on Windows, Android and macOS. 3. Directional geometry. The roadmap rail and spine are anchored with `left`, and the rail gradient fills from `transform-origin:left`. Under RTL both must mirror, or the progress rail fills from the wrong end. ========================================================================== */ html[lang="ar"] .tth, html[lang="ar"] .tth *, html[lang="ar"] .ttf, html[lang="ar"] .ttf *, html[lang="ar"] .ttr, html[lang="ar"] .ttr *, html[lang="ar"] .ttm, html[lang="ar"] .ttm * { font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; letter-spacing: normal !important; } /* Roadmap rail: fill from the right and set the segment label on the right. */ html[lang="ar"] .ttr-seg::before { transform-origin: right; background: linear-gradient(270deg, #8a6f1f, var(--ttr-gold)); } html[lang="ar"] .ttr-seg b { left: auto; right: 0; } html[lang="ar"] .ttr-spine::after { left: auto; right: -2px; } /* The stop cards used to be mirrored here: they entered with translateX(±28px) from their own side, so Arabic needed the sign flipped to keep each card entering from the side it sits on. THAT RULE IS GONE, AND IT HAD TO GO RATHER THAN BE MIRRORED AGAIN. The cards now rise on a translateY, and a vertical rise is already symmetric under RTL — there is no side for it to come from, so there is nothing to mirror. Leaving it would have been worse than dead: `html[lang="ar"]` outranks the base rule outright, so under Arabic the cards would have been pushed 28px sideways and then animated to none, which is to say Arabic would have kept the old sideways entrance while every other language rose. A screenshot of the English page cannot see that, and neither could the RTL check, which looks at block edges and overflow rather than at the transform on a card. */ /* ==== BEGIN GENERATED — MOBILE HOMEPAGE BLOCKS ==== */ /* MOBILE HOMEPAGE BLOCKS (.ttmob-mobile) ============================================================================ Generated from tools/preview/mobile-homepage-prototype.html by tools/build_mobile_blocks.py. Do not edit this region by hand — edit the prototype and re-run, or the next run will overwrite the change. Four separate blocks share this one root class. Read the header of the prototype for the design reasoning; the short version is that the mobile composition is a genuinely different DOM (sideways rails, a theme picker, a road with a car) rather than a reflow, which is why it could not be expressed as media queries over the desktop markup. */ /* ========================================================================== TOKENS — same brand values as the desktop blocks and the app ========================================================================== */ .ttmob-mobile{ /* Full-bleed: the block escapes the theme's centred container. Same technique as .tth / .ttf / .ttr / .ttm. */ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttmob-bg); color:var(--ttmob-fg); font-family:var(--ttmob-sans); line-height:1.5; --ttmob-gold:#d4af37; --ttmob-gold-soft:#e6c96a; --ttmob-gold-dim:rgba(212,175,55,.13); --ttmob-gold-line:rgba(212,175,55,.30); --ttmob-bg:#070707; --ttmob-bg-2:#0d0d0d; --ttmob-card:#111111; --ttmob-line:#1f1f1f; --ttmob-body:#a8a8a8; --ttmob-mute:#6a6a6a; /* Foreground. Used to be a literal #e9e9e9 on the body element and on .ttmob-mobile, which pinned the page to a dark palette no matter what the other tokens said. Deliberately not written with angle brackets: this comment is scanned by build tooling, and a bare tag name in a comment is indistinguishable from real markup to a string replace. */ --ttmob-fg:#e9e9e9; /* Structural neutrals. Gold is the brand, but when it also draws every border, label and icon it stops reading as emphasis and the page turns into a wall of gold. These carry the structure so gold stays on action, state and emphasis only. */ --ttmob-hair:rgba(255,255,255,.10); --ttmob-ico:#c9c9c9; --ttmob-eyebrow:#8a8a8a; --ttmob-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --ttmob-display:'Montserrat',var(--ttmob-sans); /* Safe-area insets so content clears the notch and the home indicator. */ --ttmob-pad-x:20px; --ttmob-safe-b:env(safe-area-inset-bottom,0px); } .ttmob-mobile, .ttmob-mobile *{ box-sizing:border-box; } /* ========================================================================== HERO ========================================================================== */ .ttmob-mobile{ --ttmob-header:64px; } .ttmob-hero{ /* 100svh minus the site header. See --ttmob-header above. */ min-height:calc(100svh - var(--ttmob-header)); position:relative; overflow:hidden; background:#0a0a0a; display:flex; align-items:center; padding:calc(28px + env(safe-area-inset-top,0px)) var(--ttmob-pad-x) calc(24px + var(--ttmob-safe-b)); } .ttmob-hero-bg{ position:absolute; inset:0; pointer-events:none; z-index:0; } .ttmob-hero-bg::before{ /* Faint technical grid, matching the desktop hero. */ content:""; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:46px 46px; mask-image:radial-gradient(ellipse 80% 60% at 50% 34%,#000 20%,transparent 100%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 34%,#000 20%,transparent 100%); } .ttmob-hero-bg::after{ /* One soft gold wash behind the phone, replacing the desktop glow layer. */ content:""; position:absolute; left:50%; top:44%; width:150%; aspect-ratio:1/1; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(212,175,55,.16) 0%,rgba(212,175,55,.05) 38%,transparent 66%); filter:blur(18px); } .ttmob-hero-inner{ position:relative; z-index:1; width:100%; text-align:center; } .ttmob-badge{ display:inline-flex; align-items:center; gap:8px; background:var(--ttmob-gold-dim); border:1px solid var(--ttmob-hair); color:var(--ttmob-gold); border-radius:999px; padding:8px 15px; font-size:.75rem; font-weight:600; letter-spacing:.4px; white-space:nowrap; max-width:100%; } .ttmob-dot{ width:6px; height:6px; border-radius:50%; background:var(--ttmob-gold); flex-shrink:0; box-shadow:0 0 9px rgba(212,175,55,.95); animation:ttmobPulse 2.4s ease-in-out infinite; } @keyframes ttmobPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.45; transform:scale(.82) } } .ttmob-h1{ font-family:var(--ttmob-display); font-weight:800; /* 8.4vw keeps "fully understood." on one line from 320px upward. */ font-size:clamp(2rem,8.4vw,3.1rem); line-height:1.06; letter-spacing:-1.2px; margin:18px 0 0; color:#fff; } .ttmob-h1 em{ font-style:normal; color:var(--ttmob-gold); } .ttmob-sub{ color:var(--ttmob-body); font-size:.98rem; line-height:1.6; margin:14px auto 0; max-width:32ch; } /* ---------- phone + orbit rings ---------- */ .ttmob-art{ position:relative; margin:30px auto 0; width:min(78vw,270px); aspect-ratio:1/1; display:grid; place-items:center; } .ttmob-rings{ position:absolute; inset:0; pointer-events:none; /* Track rings as a repeating conic/border construction. Two rings, sized in percentages so they scale with the art, not with a fixed px value. */ } .ttmob-rings::before, .ttmob-rings::after{ content:""; position:absolute; border-radius:50%; border:1px solid rgba(212,175,55,.16); } .ttmob-rings::before{ inset:0; } .ttmob-rings::after{ inset:11%; border-color:rgba(212,175,55,.11); } /* The turning arcs, on .ttmob-art's own pseudo-elements. ---------------------------------------------------------------------------- These used to be two empty
elements inside .ttmob-rings, which is the same mistake the desktop blocks made: the Back Office editor removed them on paste and the live markup arrived as — no children at all. That is why the hero had no rings in production while looking right here. .ttmob-art already contains the rings and the phone, so it is not an empty element and its pseudo-elements are safe. conic-gradient plus a mask gives a partial ring without needing SVG stroke-dasharray. */ .ttmob-art::before, .ttmob-art::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; background:conic-gradient(from 0deg, rgba(212,175,55,0) 0deg, rgba(212,175,55,.0) 300deg, var(--ttmob-gold) 352deg, rgba(212,175,55,0) 360deg); /* Punch out the middle so only a thin arc remains. */ mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px)); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px)); animation:ttmobSpin 14s linear infinite; } .ttmob-art::after{ inset:11%; animation-duration:21s; animation-direction:reverse; } @keyframes ttmobSpin{ to{ transform:rotate(360deg) } } .ttmob-phone{ position:relative; z-index:1; width:62%; filter:drop-shadow(0 14px 34px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(212,175,55,.2)); } .ttmob-phone img{ display:block; width:100%; height:auto; border-radius:12px; } /* ---------- CTA, in the thumb zone ---------- */ .ttmob-cta{ display:grid; gap:11px; margin-top:30px; } .ttmob-btn{ display:flex; align-items:center; justify-content:center; gap:9px; /* 54px: comfortably above the 44px minimum, and the primary action should be the largest target on the screen. */ min-height:54px; padding:0 22px; border-radius:999px; font-family:var(--ttmob-display); font-weight:700; font-size:.86rem; letter-spacing:.6px; text-transform:uppercase; text-decoration:none; border:1px solid transparent; -webkit-tap-highlight-color:transparent; transition:transform .16s ease, background .2s ease, border-color .2s ease; } .ttmob-btn:active{ transform:scale(.975); } .ttmob-btn-primary{ background:var(--ttmob-gold); color:#111; } .ttmob-btn-ghost{ background:transparent; color:var(--ttmob-gold); border-color:var(--ttmob-hair); } /* The CTA arrow, drawn from CSS. It was an inline , and the Back Office editor strips inline SVG — it is measured, not assumed: on the last paste the page kept 16 of 32 elements and 2 of 30 elements, which cost the desktop hero its orbit rings. A data URI in the stylesheet cannot be reached by the editor. Scoped to the hero's CTA because the sticky bar's button is deliberately arrowless. */ .ttmob-cta .ttmob-btn-primary::after{ content:""; flex-shrink:0; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; } .ttmob-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px 16px; margin-top:22px; color:var(--ttmob-mute); font-size:.75rem; } .ttmob-trust span{ display:inline-flex; align-items:center; gap:6px; } .ttmob-trust span::before{ /* A CSS tick. On ::before rather than on an , because an empty element with no class is stripped by the Back Office editor. */ content:""; width:12px; height:12px; flex-shrink:0; display:block; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* ========================================================================== FEATURES — the service log, AI receipt scan, and the full feature list ========================================================================== */ .ttmob-feat{ position:relative; background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 56px), #0a0a0a; /* `clip`, not `hidden`. The group headers below are position:sticky, and an ancestor with `overflow:hidden` becomes the scroll container for them, so they stick to THIS box instead of the viewport and appear not to stick at all. `clip` clips the same way without creating a scroll container, which is the same reason html uses overflow-x:clip. */ overflow-x:clip; padding:64px 0 58px; border-top:0; } .ttmob-feat-head{ padding:0 var(--ttmob-pad-x); text-align:center; } .ttmob-eyebrow{ color:var(--ttmob-eyebrow); font-size:.75rem; font-weight:700; letter-spacing:2.6px; text-transform:uppercase; display:block; } .ttmob-h2{ font-family:var(--ttmob-display); font-weight:800; font-size:clamp(1.7rem,7.4vw,2.5rem); line-height:1.14; letter-spacing:-1px; color:#fff; margin:12px 0 0; } .ttmob-h2 span{ color:var(--ttmob-gold); } .ttmob-lede{ color:var(--ttmob-body); font-size:.94rem; line-height:1.6; margin:12px auto 0; max-width:34ch; } /* The feature area. Groups 1 and 2 are sideways rails, chosen over a stacked deck and a spine timeline; group 3 is a set of phone mockups that double as the appearance picker. .ttmob-stack carries no horizontal padding because the rails must reach the screen edge: a card that stops short of the edge cannot peek. Each child (header, rail, nav, label) brings its own --ttmob-pad-x instead. */ .ttmob-stack{ margin-top:30px; } .ttmob-group + .ttmob-group{ margin-top:26px; } /* A plain header, not a sticky one. A rail is a single row, so there is no vertical distance inside a group for a header to stick across — sticky here would pin it over the rail's own cards for no reason. */ .ttmob-group-h{ display:flex; align-items:center; gap:10px; margin:0 0 13px; padding:0 var(--ttmob-pad-x); font-family:inherit; font-size:.75rem; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; color:var(--ttmob-eyebrow); opacity:0; } .ttmob-group-h::after{ content:""; flex:1; height:1px; background:#1e1e1e; /* Draws itself left-to-right, echoing the roadmap lane. Transform only, so it never triggers layout. */ transform:scaleX(0); transform-origin:left; transition:transform .7s cubic-bezier(.2,.75,.3,1) .1s; } .ttmob-group-h.in{ opacity:1; animation:ttmobHeadIn .4s ease backwards; } .ttmob-group-h.in::after{ transform:scaleX(1); } /* ========================================================================== GROUPS 1 & 2 — sideways rail ========================================================================== The next card peeks at 80%. A card that fills the width reads as a static panel and never gets swiped, which is what "the rail hid the features" looked like. `overscroll-behavior-x: contain` stops a swipe that reaches the end from dragging the whole page sideways. */ .ttmob-rail{ display:flex; gap:12px; padding:4px var(--ttmob-pad-x) 6px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .ttmob-rail::-webkit-scrollbar{ display:none; } /* Cards stretch to the tallest, so a short card does not leave a ragged row. */ .ttmob-rail .ttmob-fcard{ flex:0 0 80%; max-width:330px; scroll-snap-align:center; } .ttmob-rnav{ display:flex; align-items:center; justify-content:center; gap:12px; padding:12px var(--ttmob-pad-x) 0; } .ttmob-rdots{ display:flex; gap:6px; } .ttmob-rdots i{ width:6px; height:6px; border-radius:99px; background:#2e2e2e; transition:width .2s ease, background .2s ease; } .ttmob-rdots i.on{ width:20px; background:var(--ttmob-gold); } /* The arrow comes from CSS so it can mirror for Arabic in one rule. */ .ttmob-rhint{ font-size:.75rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--ttmob-mute); } .ttmob-rhint::after{ content:" ›"; } .ttmob-fcard{ display:flex; flex-direction:column; background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:18px; padding:15px 14px 16px; } .ttmob-fico{ width:40px; height:40px; border-radius:12px; margin-bottom:11px; background-color:rgba(255,255,255,.045); border:1px solid var(--ttmob-hair); background-repeat:no-repeat; background-position:center; background-size:20px 20px; } .ttmob-fbody{ min-width:0; } .ttmob-fbody h3{ font-family:var(--ttmob-display); font-weight:700; font-size:.92rem; color:#fff; margin:0 0 6px; line-height:1.3; } /* .8rem is 12.8px, above the site-wide 12px floor. Two columns at 360px leave about 127px of text width per tile, so the copy is written for that. */ .ttmob-fbody p{ color:var(--ttmob-body); font-size:.8rem; line-height:1.6; margin:0; } .ttmob-fbody p b{ color:#d6d6d6; font-weight:600; } /* ========================================================================== GROUP 3 — Made for you: mockups that are also the picker ========================================================================== Each appearance is shown as a miniature of itself — its real background, its real card surface, its real accent — and the three double as the selector: tap one and the preview below restyles. That replaces a separate row of tabs, which would have said the same thing twice. Nothing here is an empty classless . The Back Office editor strips those, and drawing the mockup with pseudo-elements and hard-stop gradients needs fewer elements than children anyway: the card's two lines are ::before/::after and the three accent bars are one gradient, not three spans. The accent colours are the app's own. M Performance uses ice blue for chrome AND red for filled controls, which is what the two bars show. */ .ttmob-mfy-lab{ font-size:.75rem; font-weight:700; color:var(--ttmob-mute); margin:0 0 10px; padding:0 var(--ttmob-pad-x); } .ttmob-mocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; padding:0 var(--ttmob-pad-x); margin:0; border:0; } /* A real button, so it gets keyboard focus and assistive tech announces it as the tab it behaves like. */ .ttmob-mock{ appearance:none; -webkit-appearance:none; cursor:pointer; background:none; border:0; padding:0; margin:0; font:inherit; text-align:center; color:inherit; } .ttmob-pscreen{ position:relative; aspect-ratio:9/17; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.14); padding:10px 9px; display:flex; flex-direction:column; gap:6px; transition:box-shadow .2s ease, border-color .2s ease; } .ttmob-mock[aria-selected="true"] .ttmob-pscreen{ border-color:var(--ttmob-gold-line); box-shadow:0 0 0 2px rgba(212,175,55,.35); } .ttmob-pscreen::before{ /* status bar */ content:""; height:3px; width:34%; border-radius:99px; opacity:.5; background:currentColor; flex-shrink:0; } .ttmob-pcard{ margin-top:auto; border-radius:8px; padding:7px 6px; border:1px solid rgba(128,128,128,.28); } .ttmob-pcard::before,.ttmob-pcard::after{ content:""; display:block; height:5px; border-radius:99px; background:currentColor; opacity:.28; } .ttmob-pcard::before{ margin-bottom:5px; } .ttmob-pcard::after{ width:58%; } /* Three bars in one element: two in the theme accent, the last in the second accent where the theme has one. */ .ttmob-paccent{ height:5px; border-radius:99px; background-image:linear-gradient(90deg, var(--ttmob-acc) 0 32%, transparent 32% 36%, var(--ttmob-acc) 36% 68%, transparent 68% 72%, var(--ttmob-acc2,var(--ttmob-acc)) 72% 100%); } .ttmob-plbl{ display:block; font-size:.75rem; font-weight:700; color:#cfcfcf; margin-top:9px; line-height:1.35; } .ttmob-plbl em{ display:block; font-style:normal; font-weight:500; color:var(--ttmob-mute); font-size:.75rem; } /* The three palettes, shared by the mockup screens and the preview. */ .ttmob-pv-dark{ --ttmob-acc:#d4af37; background:#0a0a0a; color:#cfcfcf; } .ttmob-pv-dark .ttmob-pcard{ background:#252525; } .ttmob-pv-light{ --ttmob-acc:#d4af37; background:#e8e8ec; color:#5c5c62; } .ttmob-pv-light .ttmob-pcard{ background:#f0f0f3; border-color:rgba(0,0,0,.12); } .ttmob-pv-mperf{ --ttmob-acc:#81c4ff; --ttmob-acc2:#e7222e; background:#06090f; color:#8fa4b8; } .ttmob-pv-mperf .ttmob-pcard{ background:#0e1520; border-color:rgba(129,196,255,.22); } /* The preview. Its theme class is swapped by the picker, so this is a real surface in the real palette rather than a screenshot of one. */ .ttmob-preview{ margin:16px var(--ttmob-pad-x) 0; border-radius:18px; padding:17px 16px 18px; border:1px solid rgba(128,128,128,.2); transition:background .25s ease, border-color .25s ease; } .ttmob-pv-title{ font-family:var(--ttmob-display); font-weight:800; font-size:1rem; margin:0 0 4px; } .ttmob-pv-sub{ font-size:.78rem; margin:0 0 13px; opacity:.72; } .ttmob-pv-inner{ border-radius:12px; padding:12px; border:1px solid rgba(128,128,128,.25); } .ttmob-pv-inner::before,.ttmob-pv-inner::after{ content:""; display:block; height:6px; border-radius:99px; background:currentColor; opacity:.22; } .ttmob-pv-inner::before{ margin-bottom:7px; } .ttmob-pv-inner::after{ width:55%; } .ttmob-pv-chips{ height:6px; margin-top:14px; border-radius:99px; background-image:linear-gradient(90deg, var(--ttmob-acc) 0 15%, transparent 15% 17%, var(--ttmob-acc) 17% 32%, transparent 32% 34%, var(--ttmob-acc2,var(--ttmob-acc)) 34% 49%); } .ttmob-pv-cta{ display:inline-block; margin-top:14px; border-radius:99px; padding:7px 15px; font-size:.76rem; font-weight:800; letter-spacing:.4px; } .ttmob-preview.ttmob-pv-dark{ background:#0a0a0a; color:#cfcfcf; } .ttmob-preview.ttmob-pv-dark .ttmob-pv-inner{ background:#252525; } .ttmob-preview.ttmob-pv-dark .ttmob-pv-title{ color:#fff; } .ttmob-preview.ttmob-pv-dark .ttmob-pv-cta{ background:#d4af37; color:#0a0a0a; } .ttmob-preview.ttmob-pv-light{ background:#e8e8ec; color:#5c5c62; } .ttmob-preview.ttmob-pv-light .ttmob-pv-inner{ background:#f0f0f3; border-color:rgba(0,0,0,.12); } .ttmob-preview.ttmob-pv-light .ttmob-pv-title{ color:#2c2c2e; } .ttmob-preview.ttmob-pv-light .ttmob-pv-cta{ background:#d4af37; color:#2c2c2e; } .ttmob-preview.ttmob-pv-mperf{ background:#06090f; color:#8fa4b8; } .ttmob-preview.ttmob-pv-mperf .ttmob-pv-inner{ background:#0e1520; border-color:rgba(129,196,255,.22); } .ttmob-preview.ttmob-pv-mperf .ttmob-pv-title{ color:#fff; } .ttmob-preview.ttmob-pv-mperf .ttmob-pv-cta{ background:#e7222e; color:#fff; } /* Flags rather than language codes: three flags read at a glance where EN / FR / AR needs decoding. Data-URI SVGs in CSS, so nothing is an that a lazy loader might skip and nothing is inline SVG for the editor to strip. The Union Jack is the simplified form — the true counterchange needs clip paths and is indistinguishable at 22px. */ .ttmob-langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:20px; padding:0 var(--ttmob-pad-x); } .ttmob-lang{ display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; padding:0 8px; background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:14px; font-size:.82rem; font-weight:700; color:#e8e8e8; } .ttmob-flag{ width:22px; height:15px; border-radius:2.5px; flex-shrink:0; background-size:cover; background-position:center; box-shadow:0 0 0 1px rgba(255,255,255,.16); } .ttmob-flag--uk{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 L60 30 M60 0 L0 30' stroke='%23fff' stroke-width='7'/%3E%3Cpath d='M0 0 L60 30 M60 0 L0 30' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0 V30 M0 15 H60' stroke='%23fff' stroke-width='11'/%3E%3Cpath d='M30 0 V30 M0 15 H60' stroke='%23C8102E' stroke-width='7'/%3E%3C/svg%3E"); } .ttmob-flag--fr{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23fff'/%3E%3Crect width='10' height='20' fill='%230055A4'/%3E%3Crect x='20' width='10' height='20' fill='%23EF4135'/%3E%3C/svg%3E"); } .ttmob-flag--tn{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23E70013'/%3E%3Ccircle cx='15' cy='10' r='5.8' fill='%23fff'/%3E%3Ccircle cx='14.6' cy='10' r='4.2' fill='%23E70013'/%3E%3Ccircle cx='15.8' cy='10' r='3.6' fill='%23fff'/%3E%3Cpath d='M17.95 8.55 L18.29 9.53 L19.33 9.55 L18.5 10.18 L18.8 11.17 L17.95 10.58 L17.1 11.17 L17.4 10.18 L16.57 9.55 L17.61 9.53 Z' fill='%23E70013'/%3E%3C/svg%3E"); } /* Arabic written in Arabic, right to left. Setting it correctly demonstrates the RTL support faster than any sentence claiming it. */ .ttmob-lang--ar{ font-family:'Tajawal','Geeza Pro','SF Arabic','Segoe UI',sans-serif; font-size:.95rem; } /* Below 340px three chips leave ~86px each, which crowds "Français". Two columns then a lone chip reads better than three cramped ones. */ @media (max-width:339px){ .ttmob-langs{ grid-template-columns:repeat(2,1fr); } } /* ========================================================================== ARRIVAL MOTION ========================================================================== Animation, not transition, and the distinction is load-bearing. The older reveal helper on this page sets an inline `transition-delay`, which persists for the life of the page — on a tappable tile that means the press state would also be delayed by up to ~350ms, so the tile feels broken under the thumb. An animation delay applies only to the animation. `backwards` fill, never `both`: with `both` the final keyframe keeps applying forever and would permanently override the :active transform. */ @keyframes ttmobTileRise{ from{ opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } } @keyframes ttmobIconSet{ from{ opacity:0; transform:scale(.86); } to { opacity:1; transform:none; } } @keyframes ttmobHeadIn{ from{ opacity:0; } to { opacity:1; } } .ttmob-fcard,.ttmob-lang,.ttmob-mock,.ttmob-preview,.ttmob-mfy-lab{ opacity:0; } .ttmob-fcard{ transition:transform .16s ease, border-color .16s ease; } .ttmob-fcard.in,.ttmob-lang.in,.ttmob-mock.in,.ttmob-preview.in,.ttmob-mfy-lab.in{ opacity:1; animation:ttmobTileRise .5s cubic-bezier(.2,.75,.3,1) backwards; animation-delay:calc(var(--ttmob-i,0) * 55ms); } /* The icon settles just behind its own card, which reads as the card assembling rather than everything arriving at once. */ .ttmob-fico{ opacity:0; } .ttmob-fcard.in .ttmob-fico{ opacity:1; animation:ttmobIconSet .42s ease backwards; animation-delay:calc(var(--ttmob-i,0) * 55ms + 80ms); } /* Higher specificity than `.ttmob-fcard.in`, so it wins once the animation (which only fills backwards) has finished. */ .ttmob-fcard.in:active{ transform:scale(.985); } .ttmob-fcard:active{ border-color:rgba(212,175,55,.42); } /* ========================================================================== THE CORE: the service log ========================================================================== This is what the app is actually for, so it gets its own block rather than a card in the carousel. Seven categories and forty-three service types are the headline number, and the breadth is the point — so all seven are shown, not hidden behind a tap. */ .ttmob-core{ margin:34px var(--ttmob-pad-x) 0; padding:24px 20px 22px; background:var(--ttmob-card); border:1px solid rgba(212,175,55,.24); border-radius:22px; } .ttmob-core-stat{ display:inline-block; margin-bottom:12px; background:var(--ttmob-gold-dim); border:1px solid var(--ttmob-gold-line); color:var(--ttmob-gold); border-radius:999px; padding:5px 13px; font-size:.75rem; font-weight:800; letter-spacing:.5px; } .ttmob-core h3{ font-family:var(--ttmob-display); font-weight:800; font-size:1.28rem; color:#fff; margin:0 0 9px; line-height:1.24; } .ttmob-core h3 span{ color:var(--ttmob-gold); } .ttmob-core > p{ color:var(--ttmob-body); font-size:.88rem; line-height:1.62; margin:0 0 18px; } .ttmob-cats{ display:grid; gap:9px; } .ttmob-cat-row{ display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.022); border:1px solid #1e1e1e; border-radius:14px; padding:11px 12px; } .ttmob-cat-ico{ width:34px; height:34px; border-radius:10px; flex-shrink:0; background-color:rgba(255,255,255,.045); border:1px solid var(--ttmob-hair); background-repeat:no-repeat; background-position:center; background-size:17px 17px; } .ttmob-cat-txt{ min-width:0; flex:1; } .ttmob-cat-txt b{ display:block; font-size:.83rem; font-weight:700; color:#fff; line-height:1.35; } .ttmob-cat-txt em{ display:block; font-style:normal; font-size:.75rem; color:var(--ttmob-mute); line-height:1.45; margin-top:2px; } /* The name stays on the row. The list opens under it, and it is the same list the wide page uses. A closed row has no description. */ details.ttmob-cat-row{ display:block; padding:0; } details.ttmob-cat-row > summary{ display:flex; align-items:center; gap:12px; padding:11px 12px; cursor:pointer; list-style:none; } details.ttmob-cat-row > summary::-webkit-details-marker{ display:none; } .ttmob-cat-body{ display:none; padding:0 14px 12px 58px; color:var(--ttmob-mute); font-size:.75rem; line-height:1.45; } details.ttmob-cat-row[open] .ttmob-cat-body{ display:block; } .ttmob-cat-body em{ display:block; font-style:normal; color:#c8c8c8; margin-bottom:6px; } .ttmob-cat-body ul{ margin:0; padding-left:16px; } .ttmob-cat-body li{ margin:2px 0; } .ttmob-cat-n{ flex-shrink:0; font-size:.75rem; font-weight:800; color:var(--ttmob-eyebrow); } /* 1. Fuel & cost tracking */ .cat-fuel .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h12V4a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2z'/%3E%3Cpath d='M15 9h3a2 2 0 0 1 2 2v9a2 2 0 0 0 2 2'/%3E%3Cpath d='M6 7h6M6 11h6M6 15h4'/%3E%3C/svg%3E"); } /* 2. Oil & filters */ .cat-oil .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.7s6 7.5 6 11a6 6 0 0 1-12 0c0-3.5 6-11 6-11z'/%3E%3C/svg%3E"); } /* 3. Mechanical & drivetrain */ .cat-mech .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1v.2a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-2.8-1.1l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 15a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.1-2.7l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 9 4.6a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1A1.6 1.6 0 0 0 19.4 11a2 2 0 1 1 0 4z'/%3E%3C/svg%3E"); } /* 4. Software & performance */ .cat-software .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='10' height='10' rx='2'/%3E%3Cpath d='M10 2v3M14 2v3M10 19v3M14 19v3M2 10h3M2 14h3M19 10h3M19 14h3'/%3E%3C/svg%3E"); } /* 5. Lighting & electrical */ .cat-light .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L3 14h7l-1 8 10-12h-7z'/%3E%3C/svg%3E"); } /* 6. Wash & aesthetics */ .cat-wash .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.8L18.7 9.7l-4.8 1.9L12 16.4l-1.9-4.8L5.3 9.7l4.8-1.9z'/%3E%3Cpath d='M18.5 16.5l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); } /* 7. Body, wheels & tyres */ .cat-body .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 3v6M12 15v6M3 12h6M15 12h6'/%3E%3C/svg%3E"); } /* 8. Admin & docs */ .cat-admin .ttmob-cat-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E"); } /* ========================================================================== AI RECEIPT SCAN — the second thing that earns its own block ========================================================================== */ .ttmob-scan{ margin:14px var(--ttmob-pad-x) 0; padding:22px 20px; border-radius:22px; position:relative; overflow:hidden; background:linear-gradient(150deg,rgba(212,175,55,.13) 0%,rgba(212,175,55,.03) 46%,transparent 78%),var(--ttmob-card); border:1px solid rgba(212,175,55,.3); } .ttmob-scan-tag{ display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--ttmob-eyebrow); margin-bottom:11px; } .ttmob-scan-tag::before{ /* A flex item like the was, so the parent's gap still applies. */ content:""; width:15px; height:15px; flex-shrink:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 4.8L18.7 9.7l-4.8 1.9L12 16.4l-1.9-4.8L5.3 9.7l4.8-1.9z'/%3E%3C/svg%3E") center/contain no-repeat; } .ttmob-scan h3{ font-family:var(--ttmob-display); font-weight:800; font-size:1.2rem; color:#fff; margin:0 0 9px; line-height:1.26; } .ttmob-scan h3 span{ color:var(--ttmob-gold); } .ttmob-scan > p{ color:var(--ttmob-body); font-size:.87rem; line-height:1.62; margin:0 0 16px; } .ttmob-fill{ display:grid; gap:7px; } .ttmob-fill div{ display:flex; align-items:center; gap:9px; font-size:.8rem; color:#d2d2d2; } .ttmob-paper{ position:relative; overflow:hidden; margin:0 0 16px; padding:14px 14px 12px; border-radius:16px; background:linear-gradient(165deg,#171717,#0c0c0c); border:1px solid #2a2a2a; } .ttmob-paper::before{ content:""; position:absolute; left:0; right:0; top:0; height:56px; pointer-events:none; background:linear-gradient(180deg, transparent 0%, rgba(212,175,55,.08) 42%, rgba(212,175,55,.28) 50%, rgba(212,175,55,.08) 58%, transparent 100%); animation:ttmobScan 3.4s cubic-bezier(.45,.05,.55,.95) infinite alternate; } @keyframes ttmobScan{ 0%{ transform:translateY(-56px); opacity:.35; } 12%{ opacity:1; } 100%{ transform:translateY(210px); opacity:1; } } @media (prefers-reduced-motion:reduce){ .ttmob-paper::before{ animation:none; opacity:0; } } .ttmob-paper-top{ position:relative; display:flex; justify-content:space-between; align-items:center; padding-bottom:8px; margin-bottom:10px; border-bottom:1px dashed #2c2c2c; } .ttmob-paper-top b{ color:#fff; font-size:.82rem; } .ttmob-paper-top span{ font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ttmob-mute); } .ttmob-lines{ position:relative; display:grid; gap:8px; } .ttmob-ln{ display:flex; justify-content:space-between; gap:10px; } .ttmob-ln div{ height:7px; border-radius:4px; background:#242424; } .ttmob-ln div:first-child{ width:46%; } .ttmob-ln div:last-child{ width:26%; background:rgba(212,175,55,.28); } .ttmob-stamp{ position:relative; display:inline-flex; margin-top:12px; padding:6px 10px; border-radius:999px; background:var(--ttmob-gold); color:#111; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } /* First minute — one screen under the hero. */ .ttmob-minute{ padding:36px var(--ttmob-pad-x) 28px; background:linear-gradient(180deg, rgba(212,175,55,.28), rgba(212,175,55,0) 110px), #161616; } .ttmob-minute .ttmob-h2{ font-size:1.45rem; } .ttmob-steps{ display:flex; gap:8px; margin:14px 0 4px; padding:0; list-style:none; } .ttmob-steps li{ flex:1; text-align:center; font-size:.72rem; font-weight:700; color:#fff; background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:12px; padding:8px 4px; } .ttmob-steps b{ display:block; color:var(--ttmob-gold); font-size:.7rem; margin-bottom:2px; } .ttmob-mini{ display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-top:1px solid #222; } .ttmob-mini .ttmob-cat-ico{ width:32px; height:32px; } .ttmob-mini b{ display:block; color:#fff; font-size:.86rem; } .ttmob-mini p{ margin:2px 0 0; color:var(--ttmob-mute); font-size:.75rem; line-height:1.4; } .ttmob-pill{ display:inline-block; margin-top:6px; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#111; background:var(--ttmob-gold); border-radius:999px; padding:2px 7px; } .ttmob-know{ display:grid; gap:7px; margin-top:4px; } .ttmob-know div{ display:flex; gap:8px; align-items:center; color:#cfcfcf; font-size:.78rem; } .ttmob-know i, .ttmob-know-dot{ width:8px; height:8px; border-radius:50%; flex:none; background:var(--ttmob-gold); } .ttmob-ico-pin{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E"); } .ttmob-ico-bulb{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3 11c.6.5 1 1.2 1 2h4c0-.8.4-1.5 1-2a6 6 0 0 0-3-11z'/%3E%3C/svg%3E"); } .ttmob-ico-cal{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E"); } .ttmob-ico-check{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); } /* Community board — medals and metals from the app. */ .ttmob-comm{ padding:40px var(--ttmob-pad-x) 28px; background:linear-gradient(180deg, rgba(77,163,255,.26), rgba(77,163,255,0) 120px), #101820; } .ttmob-comm-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; } .ttmob-comm-chips span{ font-size:.7rem; font-weight:700; padding:4px 8px; border-radius:999px; background:rgba(77,163,255,.16); color:#b7d4f0; border:1px solid #2a4d72; } .ttmob-lb{ display:grid; gap:8px; } .ttmob-lb-row{ display:flex; align-items:center; gap:8px; min-height:52px; background:#252525; border-radius:13px; overflow:hidden; padding-right:10px; } .ttmob-eyebrow--lb{ color:#4da3ff; } .ttmob-lb--1 .ttmob-lb-bar{ background:#d4af37; } .ttmob-lb--1 .ttmob-lb-medal{ background:rgba(212,175,55,.22); border:1.5px solid rgba(212,175,55,.8); } .ttmob-lb--1 .ttmob-lb-medal::before{ content:"\1F947"; } .ttmob-lb--2 .ttmob-lb-bar{ background:#b8c2cc; } .ttmob-lb--2 .ttmob-lb-medal{ background:rgba(184,194,204,.22); border:1.5px solid rgba(184,194,204,.8); } .ttmob-lb--2 .ttmob-lb-medal::before{ content:"\1F948"; } .ttmob-lb--3 .ttmob-lb-bar{ background:#cd7f32; } .ttmob-lb--3 .ttmob-lb-medal{ background:rgba(205,127,50,.22); border:1.5px solid rgba(205,127,50,.8); } .ttmob-lb--3 .ttmob-lb-medal::before{ content:"\1F949"; } .ttmob-lb-bar{ width:4px; align-self:stretch; flex:none; } .ttmob-lb-medal{ width:36px; height:36px; flex:none; display:grid; place-items:center; border-radius:9px; font-size:18px; line-height:1; } .ttmob-lb-medal::before{ font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; font-size:18px; line-height:1; } .ttmob-lb-row img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; } .ttmob-lb-row > div{ min-width:0; flex:1; } .ttmob-lb-row b{ display:block; color:#fff; font-size:.8rem; } .ttmob-lb-row i{ display:block; font-style:normal; color:#bdbdbd; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .ttmob-lb-pts{ margin-left:auto; color:#4da3ff; font-weight:800; font-size:.78rem; flex:none; } .ttmob-avs-h{ margin:14px 0 8px; color:#cfcfcf; font-size:.78rem; font-weight:700; } .ttmob-avs{ display:flex; flex-wrap:nowrap; gap:6px; align-items:center; } .ttmob-avs img{ width:0; flex:1 1 0; max-width:40px; aspect-ratio:1; height:auto; border-radius:50%; object-fit:cover; } .ttmob-avs-more{ width:0; flex:1 1 0; max-width:40px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:#1a1a1a; border:1px solid #3a3a3a; color:#d4af37; font-size:.62rem; font-weight:800; letter-spacing:-.03em; } /* Keys — two equal cards, then only the differences. */ .ttmob-keys{ padding:40px var(--ttmob-pad-x) 28px; background:#0a0a0a; } .ttmob-key-pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch; margin-top:14px; } .ttmob-key{ display:flex; flex-direction:column; height:100%; background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:14px; overflow:hidden; } .ttmob-key img{ width:100%; height:118px; object-fit:cover; object-position:center; flex:none; } .ttmob-key b{ display:block; padding:8px 8px 0; font-size:.78rem; color:#fff; } .ttmob-key span{ display:block; margin-top:auto; min-height:48px; padding:4px 8px 10px; color:var(--ttmob-gold); font-weight:800; font-size:.8rem; } .ttmob-key em{ display:block; font-style:normal; font-weight:600; font-size:.62rem; color:var(--ttmob-mute); line-height:1.35; } .ttmob-fill em{ width:15px; height:15px; flex-shrink:0; display:block; font-style:normal; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; } /* One icon per feature, bound by name so inserting a card cannot silently reassign icons the way :nth-child would. */ /* Vehicle history book */ .fi-history .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3C/svg%3E"); } /* Digital glovebox */ .fi-glovebox .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h5l2 3h9a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); } /* Multi-vehicle garage */ .fi-garage .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 17h14M6 17V9l2-4h8l2 4v8'/%3E%3Ccircle cx='8' cy='19' r='1.6'/%3E%3Ccircle cx='16' cy='19' r='1.6'/%3E%3C/svg%3E"); } /* Share garage card */ .fi-share .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='M8.6 10.6l6.8-3.8M8.6 13.4l6.8 3.8'/%3E%3C/svg%3E"); } /* Smart Advisor */ .fi-advisor .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.6L20 10l-4 3.8L17 20l-5-2.8L7 20l1-6.2L4 10l5.8-1.4z'/%3E%3C/svg%3E"); } /* Save Spot */ .fi-spot .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } /* Community ranking */ .fi-rank .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3'/%3E%3Cpath d='M10 14h4M9 20h6M12 14v6'/%3E%3C/svg%3E"); } /* Budget analytics */ .fi-budget .ttmob-fico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); } @keyframes ttmobNudge{ 0%,100%{ transform:translateX(0); opacity:.5 } 50%{ transform:translateX(4px); opacity:1 } } /* ========================================================================== ROADMAP — vertical timeline ========================================================================== The desktop block is an alternating left/right timeline with a centre spine and a rotating progress ring per milestone. Neither survives the move to a phone: alternating sides needs horizontal room, and seven spinning rings in a single column is repetition rather than emphasis. So on mobile the timeline is one column with the rail on the left, and the turning-ring idea is spent where it earns its keep: on the ACTIVE milestone, as a pulse. Everyone else gets a quiet status chip. The per-milestone icons are kept — they carry meaning. */ .ttmob-road{ background:linear-gradient(180deg, rgba(212,175,55,.16), transparent 90px), #0a0a0a; border-top:0; padding:64px 0 58px; } .ttmob-road-inner{ padding:0 var(--ttmob-pad-x); } .ttmob-faq{ padding:48px var(--ttmob-pad-x) 96px; background:linear-gradient(180deg, rgba(212,175,55,.14), transparent 80px), #161616; } .ttmob-faq .ttmob-h2{ font-size:1.55rem; } .ttmob-faq-all{ margin-top:18px; background:#111; border:1px solid #2a2a2a; border-radius:14px; overflow:hidden; } .ttmob-faq-all > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:14px; cursor:pointer; color:#fff; font-weight:700; font-size:.95rem; } .ttmob-faq-all > summary::-webkit-details-marker{ display:none; } .ttmob-faq-all > summary::marker{ content:""; } .ttmob-faq-all > summary b{ flex:1; } .ttmob-faq-all[open]{ border-color:rgba(212,175,55,.35); } .ttmob-faq-all[open] > summary .ttmob-chev{ transform:rotate(180deg); } .ttmob-faq-list{ padding:0 10px 12px; display:grid; gap:8px; } .ttmob-faq-q{ background:#0c0c0c; border:1px solid #2a2a2a; border-radius:12px; } .ttmob-faq-q[open]{ border-color:rgba(212,175,55,.35); background:#151515; } .ttmob-faq-q > summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; color:#fff; font-weight:650; font-size:.84rem; } .ttmob-faq-q > summary::-webkit-details-marker{ display:none; } .ttmob-faq-q > summary::marker{ content:""; } .ttmob-faq-q > summary b{ flex:1; font-weight:650; } .ttmob-faq-q[open] > summary .ttmob-chev{ transform:rotate(180deg); } .ttmob-faq-a{ padding:0 12px 12px; color:var(--ttmob-body); font-size:.78rem; line-height:1.55; } .ttmob-faq-a p{ margin:0; } .ttmob-faq-a p + p{ margin-top:8px; } .ttmob-tl{ position:relative; margin-top:32px; /* Left padding reserves the roadway; the cards sit in the space beside it. */ padding-left:72px; } /* ---------- the road ---------- Asphalt strip with two solid edge lines, drawn as a background stack rather than an element, so nothing extra has to survive the Back Office editor. */ .ttmob-tl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:56px; border-radius:28px; background-color:#131313; background-image: linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)), linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)); background-size:2px 100%,2px 100%; background-position:7px 0,47px 0; background-repeat:no-repeat; box-shadow:0 0 0 1px rgba(255,255,255,.045); /* The far end fades rather than stopping dead, so the road reads as continuing past the last milestone instead of finishing at it. */ mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 90%,transparent 100%); } /* Centre lane markings — the dashes you would actually see down the middle. */ .ttmob-tl::after{ content:""; position:absolute; left:28px; top:16px; bottom:16px; width:2px; transform:translateX(-50%); background:repeating-linear-gradient(to bottom, rgba(212,175,55,.62) 0 13px, transparent 13px 30px); mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 90%,transparent 100%); } /* ---------- the car ---------- Default position is the first milestone, so it is correct before the script runs and if scripting is unavailable. The outer element carries the scroll-driven position; the inner one carries the steering wobble, so the two transforms cannot overwrite each other. */ .ttmob-road-car{ position:absolute; left:28px; top:0; width:36px; height:63px; z-index:3; transform:translate(-50%,-50%) translateY(15px); pointer-events:none; will-change:transform; } .ttmob-road-car::before{ /* The car. This was an empty classless , which the Back Office editor strips — pasting the roadmap block would have deleted the car itself. */ content:""; display:block; width:100%; height:100%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 72' fill='none'%3E%3Crect x='1' y='12' width='5' height='13' rx='2.5' fill='%230a0a0a'/%3E%3Crect x='34' y='12' width='5' height='13' rx='2.5' fill='%230a0a0a'/%3E%3Crect x='1' y='45' width='5' height='13' rx='2.5' fill='%230a0a0a'/%3E%3Crect x='34' y='45' width='5' height='13' rx='2.5' fill='%230a0a0a'/%3E%3Crect x='4' y='2' width='32' height='68' rx='12' fill='%231c1c1c' stroke='%23d4af37' stroke-width='1.5'/%3E%3Cpath d='M10 13h20l-2.5 8h-15z' fill='%233a3427'/%3E%3Crect x='9.5' y='23' width='21' height='24' rx='4' fill='%23262626'/%3E%3Cpath d='M10.5 49h19l-2.5 9h-14z' fill='%233f3826'/%3E%3Crect x='7.5' y='62' width='7' height='3.6' rx='1.8' fill='%23f7ecc0'/%3E%3Crect x='25.5' y='62' width='7' height='3.6' rx='1.8' fill='%23f7ecc0'/%3E%3C/svg%3E") center/contain no-repeat; filter:drop-shadow(0 3px 8px rgba(0,0,0,.65)) drop-shadow(0 0 10px rgba(212,175,55,.3)); animation:ttmobSteer 2.6s ease-in-out infinite; } @keyframes ttmobSteer{ 0%,100%{ transform:rotate(-1.1deg) } 50%{ transform:rotate(1.1deg) } } /* Headlights, thrown down the road ahead of the car (the car faces down). */ .ttmob-road-car::after{ content:""; position:absolute; left:50%; top:100%; width:48px; height:56px; transform:translateX(-50%); pointer-events:none; background:radial-gradient(ellipse at 50% 0%, rgba(247,236,192,.28) 0%, rgba(247,236,192,.09) 45%, transparent 74%); } .ttmob-ms{ position:relative; padding-bottom:22px; } .ttmob-ms:last-child{ padding-bottom:0; } /* Marker on the road for each milestone. */ .ttmob-ms::before{ content:""; position:absolute; left:-44px; top:8px; width:14px; height:14px; margin-left:-7px; border-radius:50%; background:#0d0d0d; border:2px solid #303030; transition:border-color .25s ease, background .25s ease, box-shadow .25s ease; } .ttmob-ms--now::before{ border-color:rgba(212,175,55,.7); } /* The marker the car is currently level with. Deliberately a positional cue only — it does not persist once the car passes, because a marker that stays lit would read as "this milestone is done", which is exactly what this section must not imply. */ .ttmob-ms.is-at::before{ background:var(--ttmob-gold); border-color:var(--ttmob-gold); box-shadow:0 0 0 4px rgba(212,175,55,.16), 0 0 14px rgba(212,175,55,.5); } .ttmob-ms-card{ background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:18px; padding:17px 17px 18px; } .ttmob-ms--now .ttmob-ms-card{ border-color:rgba(212,175,55,.34); } .ttmob-ms-top{ display:flex; align-items:center; gap:12px; margin-bottom:11px; } .ttmob-ms-ico{ width:40px; height:40px; border-radius:12px; flex-shrink:0; background-color:rgba(255,255,255,.035); border:1px solid #232323; background-repeat:no-repeat; background-position:center; background-size:19px 19px; } .ttmob-ms h3{ font-family:var(--ttmob-display); font-weight:700; font-size:.98rem; color:#fff; margin:0 0 5px; line-height:1.3; } .ttmob-ms p{ color:var(--ttmob-body); font-size:.85rem; line-height:1.6; margin:0; } /* Status chips. Visual weight descends with time: shipped/next shout, later whispers. That ordering IS the information, so the styles differ. */ .ttmob-chip{ display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; border-radius:999px; line-height:1.5; } .ttmob-chip-now{ background:var(--ttmob-gold); color:#111; } .ttmob-chip-dev{ background:rgba(255,255,255,.055); color:#cfcfcf; border:1px solid var(--ttmob-hair); } .ttmob-chip-then{ background:rgba(255,255,255,.055); color:#9c9c9c; } .ttmob-chip-later{ background:transparent; color:var(--ttmob-mute); border:1px solid #262626; } /* One icon per milestone, bound by name and the same shapes as the desktop block. These were written as position selectors counting from one, and that was one too high for every milestone: the car is the first child of .ttmob-tl, so the first milestone is child two. Each card therefore drew the previous milestone's glyph, and the last card — Partner Marketplace — drew none at all, because there was no rule for the eighth position. Binding by name is what the feature cards already do, and it cannot drift when a card is inserted. */ .ttmob-ms--app .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2' width='10' height='20' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); } .ttmob-ms--map .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.4 7-11a7 7 0 1 0-14 0c0 5.6 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E"); } .ttmob-ms--diag .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E"); } .ttmob-ms--data .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E"); } .ttmob-ms--obd .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7V5h10v2'/%3E%3Cpath d='M7 17v2h10v-2'/%3E%3C/svg%3E"); } .ttmob-ms--merc .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E"); } .ttmob-ms--perf .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20a8 8 0 1 0-8-8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3Cpath d='M4 12H2'/%3E%3C/svg%3E"); } .ttmob-ms--market .ttmob-ms-ico{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-6 9 6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 21v-7h6v7'/%3E%3C/svg%3E"); } /* ========================================================================== SUPPORTED MODELS — accordion (no JavaScript) ========================================================================== Desktop uses tab buttons. On a phone a tab strip is cramped, its labels get truncated, and the pattern hides how much content exists behind each one. An accordion shows every category and its size up front, and
/ is natively accessible and keyboard-operable with no script at all. */ .ttmob-models{ background:var(--ttmob-bg); border-top:1px solid #131313; padding:64px 0 58px; } .ttmob-models-inner{ padding:0 var(--ttmob-pad-x); } .ttmob-acc{ margin-top:30px; display:grid; gap:10px; } .ttmob-acc details{ background:var(--ttmob-card); border:1px solid var(--ttmob-line); border-radius:16px; overflow:hidden; } .ttmob-acc details[open]{ border-color:rgba(212,175,55,.32); } .ttmob-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:16px 16px; min-height:58px; -webkit-tap-highlight-color:transparent; } .ttmob-acc summary::-webkit-details-marker{ display:none; } .ttmob-acc summary::marker{ content:""; } .ttmob-cat{ flex:1; min-width:0; font-family:var(--ttmob-display); font-weight:700; font-size:.95rem; color:#fff; line-height:1.3; } .ttmob-count{ flex-shrink:0; font-size:.75rem; font-weight:700; color:var(--ttmob-mute); } .ttmob-chev{ flex-shrink:0; width:17px; height:17px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9c9c9' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .25s cubic-bezier(.22,.61,.36,1); } .ttmob-acc details[open] .ttmob-chev{ transform:rotate(180deg); } .ttmob-acc-body{ padding:0 16px 6px; animation:ttmobOpen .26s ease both; } @keyframes ttmobOpen{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } } .ttmob-mrow{ display:flex; align-items:baseline; gap:12px; padding:10px 0; border-top:1px solid #1b1b1b; } .ttmob-mrow:first-child{ border-top:0; } .ttmob-mrow strong{ flex:0 0 36%; font-size:.8rem; font-weight:600; color:var(--ttmob-gold-soft); line-height:1.45; } .ttmob-mrow span{ flex:1; font-size:.75rem; color:var(--ttmob-mute); line-height:1.55; } .ttmob-models-cta{ margin-top:26px; } /* ========================================================================== STICKY CTA — appears once the hero CTA has scrolled away ========================================================================== */ .ttmob-sticky{ position:fixed; left:0; right:0; bottom:0; z-index:40; padding:11px var(--ttmob-pad-x) calc(11px + var(--ttmob-safe-b)); background:linear-gradient(to top,rgba(7,7,7,.97) 55%,rgba(7,7,7,0)); transform:translateY(115%); transition:transform .3s cubic-bezier(.22,.61,.36,1); } .ttmob-sticky.on{ transform:translateY(0); } .ttmob-sticky .ttmob-btn{ min-height:50px; } /* ========================================================================== SCROLL ENTRY ========================================================================== */ .ttmob-rv{ opacity:0; transform:translateY(20px); } .ttmob-rv.in{ opacity:1; transform:none; transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } /* ========================================================================== REDUCED MOTION — honour the OS setting rather than animating regardless ========================================================================== */ @media (prefers-reduced-motion:reduce){ /* Tiles, icons, chips and the group rule: show the finished state, skip the journey. */ .ttmob-fcard,.ttmob-fico,.ttmob-lang,.ttmob-mock,.ttmob-preview,.ttmob-mfy-lab,.ttmob-group-h{ opacity:1 !important; animation:none !important; transform:none !important; } .ttmob-group-h::after{ transform:scaleX(1) !important; transition:none !important; } .ttmob-arc,.ttmob-dot,.ttmob-road-car::before{ animation:none !important; } .ttmob-rv{ opacity:1 !important; transform:none !important; } .ttmob-btn,.ttmob-sticky{ transition:none !important; } .ttmob-acc-body{ animation:none !important; } .ttmob-chev{ transition:none !important; } .ttmob-ms::before{ transition:none !important; } } /* ========================================================================== NO-JS — never leave content invisible ========================================================================== */ @media (scripting:none){ /* Tiles, icons, chips and the group rule: show the finished state, skip the journey. */ .ttmob-fcard,.ttmob-fico,.ttmob-lang,.ttmob-mock,.ttmob-preview,.ttmob-mfy-lab,.ttmob-group-h{ opacity:1 !important; animation:none !important; transform:none !important; } .ttmob-group-h::after{ transform:scaleX(1) !important; transition:none !important; } .ttmob-rv{ opacity:1 !important; transform:none !important; } .ttmob-sticky{ display:none; } } /* ========================================================================== RTL (Arabic): Arabic typography and mirrored road geometry ========================================================================== */ html[lang="ar"] .ttmob-mobile{ font-family:'Tajawal','Segoe UI',Tahoma,sans-serif; } html[lang="ar"] .ttmob-h1, html[lang="ar"] .ttmob-h2{ font-family:'Tajawal',sans-serif; letter-spacing:normal; } /* Letter-spacing breaks Arabic: the script is cursive, and tracking pulls the joined letterforms apart. Reset it on anything that sets tracking. */ html[lang="ar"] .ttmob-group-h, html[lang="ar"] .ttmob-eyebrow, html[lang="ar"] .ttmob-scan-tag, html[lang="ar"] .ttmob-core-stat{ letter-spacing:normal; } /* The rule draws from the right, so it reads as forward motion. */ html[lang="ar"] .ttmob-group-h::after{ transform-origin:right; } html[lang="ar"] .ttmob-rail{ direction:rtl; } html[lang="ar"] .ttmob-rhint::after{ content:" ‹"; } html[lang="ar"] .ttmob-mfy-lab{ letter-spacing:normal; } /* Timeline road mirrors to the right edge: roadway, lane markings, markers and car all flip together. */ html[lang="ar"] .ttmob-tl{ padding-left:0; padding-right:72px; } html[lang="ar"] .ttmob-tl::before{ left:auto; right:0; } html[lang="ar"] .ttmob-tl::after{ left:auto; right:28px; transform:translateX(50%); } html[lang="ar"] .ttmob-ms::before{ left:auto; right:-44px; margin-left:0; margin-right:-7px; } html[lang="ar"] .ttmob-road-car{ left:auto; right:28px; transform:translate(50%,-50%) translateY(15px); } /* The chip ordering is informational, not directional, so it does not mirror. */ html[lang="ar"] .ttmob-ms h3, html[lang="ar"] .ttmob-cat{ font-family:'Tajawal',sans-serif; } html[lang="ar"] .ttmob-mrow strong{ flex-basis:40%; } /* Small screens (360x640 and similar): the hero must still fit one screen with the CTA visible. Measured budget for 640px of height — badge 33, headline 74, sub 56, art 166, CTA 137, trust 44, padding 38 = 548, leaving headroom for larger fonts and two-line sub-copy. */ @media (max-height:700px){ .ttmob-hero{ min-height:0; padding-top:20px; padding-bottom:18px; } .ttmob-h1{ font-size:clamp(1.75rem,7.6vw,2.2rem); margin-top:14px; } .ttmob-sub{ font-size:.9rem; margin-top:10px; max-width:30ch; } .ttmob-art{ width:min(42vw,150px); margin-top:16px; } .ttmob-cta{ margin-top:18px; } .ttmob-trust{ margin-top:14px; font-size:.75rem; gap:5px 13px; } } /* ============================================================================ VARIANT GATING — exactly one composition per breakpoint ============================================================================ Both the desktop and the mobile markup ship in the page, so one has to be turned off or the visitor sees the section twice. This is done with @media rather than the module's "show on mobile only" option, because that decides from the User-Agent string and misclassifies tablets, foldables and desktop-mode browsers — and it would mean maintaining six copies of a section instead of three. 860px is the widest width at which a desktop block currently reflows, so above it the desktop composition is still the intended one. The desktop half is scoped to pages that actually carry a mobile block. An unconditional rule would blank any language whose mobile blocks have not been pasted yet — French and Arabic today — because their desktop blocks would be hidden with nothing to take their place. Removing that guard once all three languages have mobile blocks is optional; it costs one :has() and removes a whole class of "why is /fr/ empty on my phone" reports. display:none does NOT stop images inside the hidden variant from being fetched. Both variants must therefore keep their imagery in CSS or behind loading="lazy". ============================================================================ */ @media (min-width:861px){ .ttmob-mobile{ display:none !important; } } @media (max-width:860px){ body:has(.ttmob-mobile) .tth, body:has(.ttmob-mobile) .ttf, body:has(.ttmob-mobile) .ttr, body:has(.ttmob-mobile) .ttm{ display:none !important; } } /* ============================================================================ NO SEAM BETWEEN THE BLOCKS ============================================================================ The wrappers around these blocks carry `mb-4` from the Home blocks module. Zeroing it makes the sections one continuous surface and removes the dead space the empty wrappers otherwise leave on desktop. Guarded with :has(), not a page or device selector, so a wrapper is only touched when it actually wraps one of these blocks. ============================================================================ */ .block:has(.ttmob-mobile){ margin-bottom: 0 !important; } /* ==== END GENERATED — MOBILE HOMEPAGE BLOCKS ==== */ /* ============================================================================ WEB HOMEPAGE BLOCKS (.ttw-) ============================================================================ The desktop half of the homepage, second pass. WHY THIS EXISTS. The four original desktop blocks are the hero, a feature list, a roadmap and the model list. They name the features but never show their depth — the mobile composition is the one that explains the 43 service types, the receipt scan, the garage and ownership features, and the appearances. So a desktop visitor read a list of nouns, and a phone visitor read the argument. These sections are that argument, laid out for a wide screen rather than reflowed from the phone design. Section roots look like `
` — the marker class `.ttw` on every one of them is what lets the breakpoint gate at the end of this file hide the whole desktop composition with a single selector. ICONS ARE FONT AWESOME GLYPHS, not inline . The Back Office editor kept 16 of 32 elements and 2 of 30 elements on the last paste, which silently cost the hero its orbit rings; a glyph with a class is the one icon form that survives a paste intact. FontAwesome 4.7 is already bundled by the theme, so this costs no extra request. Do not move these back to . Direction: everything spacing-related uses logical properties (margin-inline-start, padding-inline, text-align:start) so the Arabic build mirrors without a second rule. The few exceptions carry their own override in the RTL section at the end. ============================================================================ */ /* ---------- shared scaffolding: tokens, header, buttons, reveal ---------- */ .ttw, .ttw *{ box-sizing:border-box; } .ttw{ --g:#d4af37; --g-dim:rgba(212,175,55,.13); --g-line:rgba(212,175,55,.30); --bg:#0a0a0a; --card:#111111; --card2:#151515; --line:#232323; /* --mute is the smallest type on the page (captions, "Download on the", tier subtitles). It is 8a8a8a rather than the 6f6f6f a designer would pick for a dark surface, because 6f6f6f measures 3.6-3.9:1 against these backgrounds and fails AA — measured, not guessed. 8a8a8a clears 5:1 on both #0a0a0a and #111 while still reading as secondary. Do not darken it without re-running tools/verify_web_homepage.js. */ --txt:#ffffff; --body:#9c9c9c; --mute:#8a8a8a; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--bg); overflow:hidden; padding:88px 0 80px; border-top:1px solid #161616; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; color:var(--body); } /* A few sections want a second surface so two of them in a row do not read as one endless field. */ .ttw.ttw-alt{ background:#0d0d0d; } .ttw-inner{ position:relative; max-width:1200px; margin:0 auto; padding:0 20px; z-index:2; } /* ---------- section header ---------- */ .ttw-head{ text-align:center; max-width:780px; margin:0 auto 54px; } .ttw-head--start{ text-align:start; margin-inline:0; max-width:none; } .ttw-eyebrow{ color:var(--g); font-family:Montserrat,sans-serif; font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:13px; } .ttw h2{ color:#fff; font-family:Montserrat,sans-serif; font-weight:800; margin:0; font-size:clamp(1.6rem,3.4vw,2.45rem); line-height:1.14; letter-spacing:-.5px; } .ttw h2 em{ font-style:normal; color:var(--g); } .ttw-lede{ color:var(--body); font-size:1.02rem; line-height:1.68; margin:16px 0 0; } .ttw-rule{ width:78px; height:3px; margin:20px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--g),transparent); } .ttw-head--start .ttw-rule{ margin-inline:0; background:linear-gradient(90deg,var(--g),transparent); } /* ---------- buttons ---------- */ .ttw-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 30px; border-radius:999px; border:1px solid transparent; font-family:Montserrat,sans-serif; font-weight:700; font-size:.79rem; letter-spacing:1.3px; text-transform:uppercase; text-decoration:none; transition:transform .25s, background .25s, border-color .25s, color .25s; } .ttw-btn-primary{ background:var(--g); color:#111; } .ttw-btn-primary:hover{ background:#b29126; color:#111; transform:translateY(-2px); } .ttw-btn-ghost{ background:transparent; color:var(--g); border-color:var(--g-line); } .ttw-btn-ghost:hover{ background:var(--g-dim); border-color:var(--g); color:var(--g); transform:translateY(-2px); } .ttw-btn-sm{ padding:12px 22px; font-size:.72rem; } /* ---------- scroll reveal ---------- THE REVEAL HAD TO BE AN ANIMATION, NOT A TRANSITION. Almost every element that reveals here also owns a transform transition for its hover lift, and `.ttw-rv` can only ever be one class of specificity. A transition on the same property from the lower-specificity rule is simply replaced, so the element would snap in rather than ease — and worse, the hover lift would be replaced by the reveal's timing on some elements and not others. An animation sidesteps that entirely. `backwards` fill is what makes the stagger work: it holds the from-state during the delay, so a card waiting 0.29s is invisible rather than flashing in early and then animating. With no `forwards`, the element lands on its normal state when the animation ends, which leaves the hover transition free to do its job from then on. */ .ttw-rv{ opacity:0; transform:translateY(22px); } .ttw.is-in .ttw-rv{ opacity:1; transform:none; animation:ttwIn .72s cubic-bezier(.22,.61,.36,1) backwards; } @keyframes ttwIn{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } } .ttw.is-in .ttw-rv:nth-child(1){ animation-delay:.05s } .ttw.is-in .ttw-rv:nth-child(2){ animation-delay:.13s } .ttw.is-in .ttw-rv:nth-child(3){ animation-delay:.21s } .ttw.is-in .ttw-rv:nth-child(4){ animation-delay:.29s } .ttw.is-in .ttw-rv:nth-child(5){ animation-delay:.37s } .ttw.is-in .ttw-rv:nth-child(6){ animation-delay:.45s } .ttw.is-in .ttw-rv:nth-child(7){ animation-delay:.53s } .ttw.is-in .ttw-rv:nth-child(8){ animation-delay:.61s } /* ---------- the tail, and why it is clamped ---------- THE NINTH CHILD USED TO ARRIVE FIRST. The stagger is keyed on nth-child, so it stops at whatever slot was written last — and a child with no rule has a delay of 0s. In a parent holding nine reveal targets, the ninth therefore animated immediately, 0.61s BEFORE the eighth, and the sequence visibly ran backwards. It looked like a rendering glitch rather than a missing rule, which is what makes it worth fixing rather than tolerating. No parent on the page holds more than eight today. That is the reason to fix it now and not later: the failure arrives with the next card added to a grid, and by then nobody will connect it to this list. Two halves. The first extends the cascade to twelve, which covers any grid on this page with room to spare. The second clamps everything past that to the twelfth slot's delay, so the rule can never be outrun: a thirteenth target arrives WITH the twelfth instead of ahead of it. A long tail that lands together reads as a group settling; a tail that lands out of order reads as a bug. */ .ttw.is-in .ttw-rv:nth-child(9){ animation-delay:.69s } .ttw.is-in .ttw-rv:nth-child(10){ animation-delay:.77s } .ttw.is-in .ttw-rv:nth-child(11){ animation-delay:.85s } .ttw.is-in .ttw-rv:nth-child(12){ animation-delay:.93s } .ttw.is-in .ttw-rv:nth-child(n+13){ animation-delay:.93s } /* ---------- shared card + icon ---------- */ .ttw-cardw{ padding:26px 24px; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 10px 30px rgba(0,0,0,.45); transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s, background .35s; } .ttw-cardw:hover{ transform:translateY(-5px); border-color:var(--g-line); background:var(--card2); } .ttw-cardw h3{ color:#fff; font-family:Montserrat,sans-serif; font-size:1.05rem; font-weight:700; margin:16px 0 9px; line-height:1.3; letter-spacing:-.2px; } .ttw-cardw p{ color:var(--body); font-size:.9rem; line-height:1.62; margin:0; } .ttw-cardw p b{ color:#cfcfcf; font-weight:600; } .ttw-ico{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:46px; height:46px; border-radius:13px; background:var(--g-dim); border:1px solid var(--g-line); color:var(--g); font-size:19px; line-height:1; } .ttw-ico--lg{ width:56px; height:56px; border-radius:16px; font-size:23px; } .ttw-ico--red{ background:rgba(226,60,60,.14); border-color:rgba(226,60,60,.36); color:#e35353; } .ttw-hr{ height:1px; background:var(--line); border:0; margin:0; } /* ============================================================================ 1. IMMEDIATE VALUE (.ttw-strip) Three things that are true in the first minute. The feature list further down is about depth; this is about being useful before any of that depth exists, which is the question a visitor actually has. ============================================================================ */ .ttw-strip .ttw-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .ttw-strip .ttw-cardw{ display:flex; flex-direction:column; } .ttw-strip .ttw-tag{ display:inline-block; margin-top:18px; align-self:flex-start; font-size:.68rem; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--g); background:var(--g-dim); border:1px solid var(--g-line); border-radius:999px; padding:6px 13px; } /* ---------- the setup, in one line ---------- The three steps from the retired "How it works" section. They sit directly under the lede that invites them, where the question "and how long does that take" is already in the reader's head. Laid out in a row with the numerals as small gold tokens. The separators are drawn by a pseudo-element on every item but the first, so they cannot end up dangling after the last one or before the first — an interpunct typed into the markup would have to be maintained by hand the moment a step is added. IT WRAPS RATHER THAN SHRINKS. Three labels fit on one line on a desktop, but at 390px they do not, and a nowrap row would push the section wide and give the page a horizontal scrollbar. Wrapping keeps it one line where there is room, which is where the request applies, and two where there is not. */ .ttw-stepsline{ list-style:none; margin:22px 0 0; padding:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 26px; } .ttw-stepsline li{ display:inline-flex; align-items:center; gap:9px; font-size:.84rem; color:#c9c9c9; position:relative; } /* the interpunct between steps, never before the first */ .ttw-stepsline li + li::before{ content:""; position:absolute; inset-inline-start:-14px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%; background:rgba(212,175,55,.5); } .ttw-stepsline li b{ display:inline-grid; place-items:center; width:21px; height:21px; flex:none; border-radius:50%; font-family:Montserrat,sans-serif; font-size:.68rem; font-weight:800; color:var(--g); background:var(--g-dim); border:1px solid var(--g-line); } /* ---------- the claims band ---------- The four privacy claims that used to be a second column beside the three feature cards. They are not cards: no border, no fill, no hover. A second row of boxes under the first would read as six features rather than three features and their proof. A hairline above, a small heading, and four compact icon-and-sentence items in one row. */ .ttw-claims{ margin-top:62px; padding-top:38px; border-top:1px solid #1a1a1a; } .ttw-claims .ttw-claims-h{ text-align:center; margin-bottom:32px; } .ttw-claims .ttw-claims-h .ttw-eyebrow{ margin-bottom:9px; } .ttw-claims .ttw-claims-h h3{ color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:clamp(1.06rem,1.7vw,1.3rem); line-height:1.25; margin:0; letter-spacing:-.2px; } .ttw-claims .ttw-claims-h h3 em{ font-style:normal; color:var(--g); } .ttw-claims .ttw-claims-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px 30px; } .ttw-claims .ttw-claim{ display:flex; align-items:flex-start; gap:13px; text-align:start; } .ttw-claims .ttw-claim .ttw-ico{ width:38px; height:38px; border-radius:11px; font-size:15px; margin-top:1px; } .ttw-claims .ttw-claim b{ display:block; color:#fff; font-size:.87rem; font-weight:600; line-height:1.38; margin-bottom:6px; } /* --mute rather than --body: this is the smallest type in the band and it must not read as the last paragraph of the section above it. Same 8a8a8a as every other caption — measured, not picked by eye. */ .ttw-claims .ttw-claim p{ color:var(--mute); font-size:.79rem; line-height:1.55; margin:0; } /* ============================================================================ 2. SERVICE DEPTH (.ttw-core) The 43 service types, on the page. This is the widest gap between what the desktop homepage said ("complete service history") and what the app does. THE EIGHT CATEGORIES ARE AN ACCORDION. They used to be eight cards with their descriptions always open, which is 43 service types and eight paragraphs arriving at once — the wall of text the section was supposed to disprove. As
the section reads as a tally first (eight rows, eight counts, and the count is the claim) and the prose is there for whoever wants it.
/ rather than a script: natively accessible and keyboard-operable, and it survives a paste with no JS at all — the Back Office editor strips attributes, not elements, so a disclosure built out of attributes would degrade and this one cannot. TWO INDEPENDENT COLUMNS, NOT ONE GRID OF EIGHT. In a single grid, opening a row stretches the row's other cell and leaves a hole under the short one. Each column is its own stack here, so opening a row moves only its own column. The markup order is still 1-8. ============================================================================ */ .ttw-core .ttw-stat{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:14px; margin:0 0 40px; padding:20px 24px; border-radius:16px; background:linear-gradient(120deg,rgba(212,175,55,.10),rgba(212,175,55,.02)); border:1px solid var(--g-line); } .ttw-core .ttw-stat b{ font-family:Montserrat,sans-serif; font-size:2rem; font-weight:800; color:var(--g); line-height:1; } .ttw-core .ttw-stat span{ color:#d8d8d8; font-size:.95rem; } .ttw-core .ttw-stat span i{ color:var(--mute); font-style:normal; } .ttw-core .ttw-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:start; } .ttw-core .ttw-cats-col{ display:grid; gap:12px; align-content:start; } .ttw-core .ttw-cat{ background:var(--card); border:1px solid var(--line); border-radius:14px; text-align:start; overflow:hidden; transition:border-color .3s, background .3s; } .ttw-core .ttw-cat[open]{ background:var(--card2); border-color:var(--g-line); } .ttw-core .ttw-cat:hover{ border-color:var(--g-line); } /* summary is the row: icon · name · count · chevron. The chevron is the ::after of the summary, which is why it is the fourth grid track and not a real element — one less node for the editor to strip. */ .ttw-core .ttw-cat > summary{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:16px; padding:15px 19px; cursor:pointer; list-style:none; } /* Safari and older Chrome draw the default disclosure triangle */ .ttw-core .ttw-cat > summary::-webkit-details-marker{ display:none; } .ttw-core .ttw-cat > summary:focus-visible{ outline:2px solid var(--g); outline-offset:-3px; border-radius:14px; } .ttw-core .ttw-cat > summary::after{ content:'\f078'; font-family:FontAwesome; font-size:.72rem; color:var(--mute); transition:transform .28s cubic-bezier(.22,.61,.36,1); } .ttw-core .ttw-cat[open] > summary::after{ transform:rotate(180deg); color:var(--g); } .ttw-core .ttw-cat b{ display:block; color:#fff; font-size:.96rem; font-weight:600; } .ttw-core .ttw-cat-n{ font-family:Montserrat,sans-serif; font-size:1.15rem; font-weight:800; color:var(--g); line-height:1; min-width:26px; text-align:end; } /* the body: the description that used to sit open in every card */ .ttw-core .ttw-cat-b{ padding:0 19px 18px 19px; } .ttw-core .ttw-cat-b em{ display:block; font-style:normal; color:var(--body); font-size:.83rem; line-height:1.58; padding-top:14px; border-top:1px solid #1e1e1e; } /* ---------- the item list inside an opened row ---------- One sub-category per line, dash-led. The dash is drawn rather than typed: a pseudo-element gives an exact 9x2px bar at a colour of our choosing, where a "–" character would inherit the font's own weight and metrics and would sit differently in each of the three languages. The list exists to be counted against the badge on the summary, so its spacing is deliberately even and its leading is loose enough that the eye can run down it without losing the line. gap on the grid and not margins on the items, so the first and last items sit flush with the list box. */ .ttw-core .ttw-cat-list{ list-style:none; margin:13px 0 0; padding:0; display:grid; gap:8px; } .ttw-core .ttw-cat-list li{ position:relative; padding-inline-start:19px; color:#bdbdbd; font-size:.81rem; line-height:1.45; } .ttw-core .ttw-cat-list li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:9px; height:2px; border-radius:1px; background:rgba(212,175,55,.62); } /* The fuel row leads: it is the entry point, and the seven below it are the reason to stay. It is the one row that starts open, so the section shows what an opened row looks like instead of describing it. */ .ttw-core .ttw-cat--hero{ background:linear-gradient(115deg,rgba(212,175,55,.11),#121212 62%); border-color:var(--g-line); } .ttw-core .ttw-cat--hero > summary{ padding:19px 22px; } .ttw-core .ttw-cat--hero .ttw-ico{ width:56px; height:56px; border-radius:16px; font-size:23px; } .ttw-core .ttw-cat--hero b{ font-size:1.12rem; font-family:Montserrat,sans-serif; font-weight:700; } .ttw-core .ttw-cat--hero em{ font-size:.9rem; color:#b9b9b9; } .ttw-core .ttw-cat--hero .ttw-cat-n{ font-size:1.5rem; } .ttw-core .ttw-cat--hero .ttw-cat-b{ padding:0 22px 20px 22px; } /* The hero row's list is the one that describes the whole feature rather than naming sub-categories, so it gets a step more size and room. */ .ttw-core .ttw-cat--hero .ttw-cat-list{ gap:10px; } .ttw-core .ttw-cat--hero .ttw-cat-list li{ font-size:.86rem; color:#c6c6c6; } /* ============================================================================ 3. AI RECEIPT SCAN (.ttw-scan) ============================================================================ */ .ttw-scan{ background:#0d0d0d; } .ttw-scan .ttw-grid2{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; } .ttw-scan .ttw-fill{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:12px; } .ttw-scan .ttw-fill li{ display:flex; align-items:flex-start; gap:12px; color:#cfcfcf; font-size:.95rem; line-height:1.5; } .ttw-scan .ttw-fill li i{ color:var(--g); font-size:14px; margin-top:4px; flex:none; } /* the receipt mock: a paper panel with a scan beam sweeping it, and the extracted fields rising off it */ .ttw-scan .ttw-scan-art{ position:relative; } .ttw-scan .ttw-paper{ position:relative; padding:30px 28px; border-radius:18px; overflow:hidden; background:linear-gradient(165deg,#171717,#0c0c0c); border:1px solid var(--line); box-shadow:0 24px 60px rgba(0,0,0,.6); } .ttw-scan .ttw-paper::before{ content:""; position:absolute; inset-inline:0; top:0; height:76px; pointer-events:none; /* SYMMETRIC, because the beam now travels both ways. It used to be a one-way gradient — gold at the top fading to nothing below — which reads as motion in one direction only. Reversed, the fade would lead and the bright edge would trail, so the sweep would look like it was being dragged backwards. A bright core with falloff on both sides has no direction in it, so it reads correctly whichever way it is going. */ background:linear-gradient(180deg, transparent 0%, rgba(212,175,55,.13) 40%, rgba(212,175,55,.62) 50%, rgba(212,175,55,.13) 60%, transparent 100%); } /* UP AND DOWN, not top-to-bottom on repeat. With `alternate` the beam runs down, then back up, and never jumps — the old one-way version restarted at the top every cycle, which is a cut rather than a scan. The 2.6s is per pass, so a full down-and-up cycle is 5.2s: fast enough to read as scanning, slow enough not to strobe beside the text. `alternate` also means the fade-in at 12% plays on the way down and the fade-out plays at the end of the way up, so the beam dissolves at the top and reappears there — it never pops into existence mid-page. */ .ttw-scan.is-in .ttw-paper::before{ animation:ttwScan 2.6s cubic-bezier(.45,.05,.55,.95) infinite alternate; } @keyframes ttwScan{ 0%{ transform:translateY(-76px); opacity:0 } 14%{ opacity:1 } 100%{ transform:translateY(330px); opacity:1 } } .ttw-scan .ttw-paper-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:15px; border-bottom:1px dashed #2c2c2c; margin-bottom:18px; } .ttw-scan .ttw-paper-top b{ color:#fff; font-family:Montserrat,sans-serif; font-size:.92rem; letter-spacing:.4px; } .ttw-scan .ttw-paper-top span{ font-size:.7rem; letter-spacing:1.3px; text-transform:uppercase; color:var(--mute); } .ttw-scan .ttw-lines{ display:grid; gap:11px; } .ttw-scan .ttw-line{ display:flex; align-items:center; justify-content:space-between; gap:14px; } .ttw-scan .ttw-line i{ display:block; height:9px; border-radius:5px; background:#242424; } .ttw-scan .ttw-line i:nth-child(1){ width:44%; } .ttw-scan .ttw-line i:nth-child(2){ width:24%; background:rgba(212,175,55,.34); } .ttw-scan .ttw-line--key i:nth-child(2){ width:32%; background:rgba(212,175,55,.72); } .ttw-scan .ttw-stamp{ display:inline-flex; align-items:center; gap:9px; margin-top:20px; padding:9px 15px; border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:#111; background:var(--g); } /* ============================================================================ 4 + 5. GARAGE & RECORDS, DRIVING & OWNERSHIP (.ttw-garage, .ttw-own) Four cards each. On the phone these are sideways rails because a phone has no room for four; on a wide screen the same four sit side by side so they can be compared at a glance, which is the whole advantage of the desktop page. ============================================================================ */ .ttw-garage .ttw-grid4, .ttw-own .ttw-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .ttw-garage .ttw-cardw, .ttw-own .ttw-cardw{ display:flex; flex-direction:column; } .ttw-garage .ttw-cardw h3, .ttw-own .ttw-cardw h3{ font-size:.99rem; } .ttw-own{ background:#0d0d0d; } /* the rank card gets the community treatment, because it is the only feature here that is about other people rather than about your own car */ .ttw-own .ttw-cardw--accent{ background:linear-gradient(150deg,rgba(212,175,55,.10),#111 58%); border-color:var(--g-line); } /* ============================================================================ 4. MADE FOR YOU (.ttw-look) Three appearances and three languages. The picker is the desktop equivalent of the phone's tappable mockups: same idea, more room, and it restyles the panel so the choice is seen rather than read. ============================================================================ */ .ttw-look .ttw-mocks{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:26px; } .ttw-look .ttw-mock{ display:block; width:100%; padding:16px; border-radius:16px; cursor:pointer; background:var(--card); border:1px solid var(--line); text-align:start; font:inherit; color:inherit; transition:transform .3s cubic-bezier(.22,.61,.36,1), border-color .3s, background .3s; } .ttw-look .ttw-mock:hover{ transform:translateY(-4px); background:var(--card2); } .ttw-look .ttw-mock[aria-selected="true"]{ border-color:var(--g); background:var(--card2); } .ttw-look .ttw-screen{ display:block; height:104px; border-radius:11px; overflow:hidden; position:relative; border:1px solid #262626; margin-bottom:13px; } .ttw-look .ttw-screen i{ position:absolute; display:block; border-radius:3px; } .ttw-look .ttw-screen i:nth-child(1){ inset-inline:12px; top:14px; height:30px; } .ttw-look .ttw-screen i:nth-child(2){ inset-inline-start:12px; top:52px; width:52%; height:9px; } .ttw-look .ttw-screen i:nth-child(3){ inset-inline-start:12px; top:68px; width:34%; height:9px; } .ttw-look .ttw-screen i:nth-child(4){ inset-inline-end:12px; bottom:12px; width:44px; height:17px; border-radius:999px; } /* dark garage */ .ttw-look .ttw-sc-dark{ background:linear-gradient(160deg,#161616,#080808); } .ttw-look .ttw-sc-dark i:nth-child(1){ background:#202020 } .ttw-look .ttw-sc-dark i:nth-child(2){ background:rgba(212,175,55,.85) } .ttw-look .ttw-sc-dark i:nth-child(3){ background:#2e2e2e } .ttw-look .ttw-sc-dark i:nth-child(4){ background:#d4af37 } /* light studio */ .ttw-look .ttw-sc-light{ background:linear-gradient(160deg,#f6f4ee,#e7e3d8); } .ttw-look .ttw-sc-light i:nth-child(1){ background:#ffffff } .ttw-look .ttw-sc-light i:nth-child(2){ background:#c9a227 } .ttw-look .ttw-sc-light i:nth-child(3){ background:#cfc9bb } .ttw-look .ttw-sc-light i:nth-child(4){ background:#c9a227 } /* m performance */ .ttw-look .ttw-sc-mperf{ background:linear-gradient(160deg,#0b1420,#060b12); } .ttw-look .ttw-sc-mperf i:nth-child(1){ background:#14263c } .ttw-look .ttw-sc-mperf i:nth-child(2){ background:#63b3ff } .ttw-look .ttw-sc-mperf i:nth-child(3){ background:#1d3c5a } .ttw-look .ttw-sc-mperf i:nth-child(4){ background:#e23636 } .ttw-look .ttw-mock b{ display:block; color:#fff; font-size:.92rem; font-weight:600; } .ttw-look .ttw-mock em{ display:block; font-style:normal; color:var(--mute); font-size:.76rem; margin-top:3px; } .ttw-look .ttw-pv{ border-radius:18px; padding:30px 32px; border:1px solid var(--line); transition:background .5s, border-color .5s; } .ttw-look .ttw-pv-dark{ background:linear-gradient(150deg,#151515,#0a0a0a); border-color:#282828; } .ttw-look .ttw-pv-light{ background:linear-gradient(150deg,#f7f5ef,#e9e5da); border-color:#d8d2c4; } .ttw-look .ttw-pv-mperf{ background:linear-gradient(150deg,#0d1a2a,#060c14); border-color:#1e3c5a; } .ttw-look .ttw-pv-top{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; } .ttw-look .ttw-pv-title{ font-family:Montserrat,sans-serif; font-size:1.15rem; font-weight:700; margin:0; } .ttw-look .ttw-pv-sub{ font-size:.84rem; margin:6px 0 0; } .ttw-look .ttw-pv-cta{ display:inline-flex; align-items:center; gap:8px; padding:9px 17px; border-radius:999px; font-size:.7rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; } .ttw-look .ttw-pv-dark .ttw-pv-title{ color:#fff } .ttw-look .ttw-pv-dark .ttw-pv-sub{ color:#9a9a9a } .ttw-look .ttw-pv-dark .ttw-pv-cta{ background:var(--g); color:#111 } .ttw-look .ttw-pv-light .ttw-pv-title{ color:#1a1a1a } .ttw-look .ttw-pv-light .ttw-pv-sub{ color:#5f5c55 } .ttw-look .ttw-pv-light .ttw-pv-cta{ background:#c9a227; color:#1a1a1a } .ttw-look .ttw-pv-mperf .ttw-pv-title{ color:#fff } .ttw-look .ttw-pv-mperf .ttw-pv-sub{ color:#8fa6c2 } .ttw-look .ttw-pv-mperf .ttw-pv-cta{ background:#63b3ff; color:#06121f } /* THREE GAUGES, NOT THREE BARS. These were three horizontal bars. On a 1200px-wide panel each bar was ~1100px long to express 74, 52 and 88 percent — three very long rules carrying very little information, which is what "looks long in the web version" was about. A gauge says the same figure in 104px and reads as an instrument rather than a progress bar. The ring is a conic-gradient behind a radial mask, so the hole is really transparent and the same markup works on all three appearances without knowing which colour is behind it. The 3D is two drop-shadows on the same element: a hard offset one that fakes the thickness of a solid coin, and a soft one that lifts it off the panel. Both follow the masked silhouette, which is why they are on the ring rather than on its wrapper — a wrapper shadow would also outline the number in the middle. The values are set with nth-child, never an inline custom property: the Back Office editor rewrites style attributes, so a ring sized with style="--pv:74" would arrive unsized and read as empty. */ .ttw-look .ttw-pies{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:26px; text-align:center; } .ttw-look .ttw-pie{ display:grid; justify-items:center; gap:4px; } .ttw-look .ttw-pie-dial{ position:relative; width:104px; height:104px; } .ttw-look .ttw-pie-face{ position:absolute; inset:0; border-radius:50%; background:conic-gradient(from -90deg, var(--pie) calc(var(--pv) * 1%), var(--track) 0); -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 55%, #000 56%); mask:radial-gradient(circle at 50% 50%, transparent 0 55%, #000 56%); filter:drop-shadow(0 5px 0 rgba(0,0,0,.45)) drop-shadow(0 11px 16px rgba(0,0,0,.42)); /* a single specular edge is what sells the bevel: light from the top-left */ box-shadow:inset 0 3px 4px rgba(255,255,255,.22), inset 0 -3px 6px rgba(0,0,0,.38); } .ttw-look .ttw-pie-val{ position:absolute; inset:0; display:grid; place-items:center; font-family:Montserrat,sans-serif; font-size:1.16rem; font-weight:800; line-height:1; } .ttw-look .ttw-pie-val i{ font-style:normal; font-size:.68rem; margin-inline-start:1px; } .ttw-look .ttw-pie-l{ display:block; font-size:.78rem; font-style:normal; margin-top:8px; } .ttw-look .ttw-pie-s{ display:block; font-size:.72rem; margin-top:2px; opacity:.8; } .ttw-look .ttw-pies .ttw-pie:nth-child(1) .ttw-pie-face{ --pv:74 } .ttw-look .ttw-pies .ttw-pie:nth-child(2) .ttw-pie-face{ --pv:52 } .ttw-look .ttw-pies .ttw-pie:nth-child(3) .ttw-pie-face{ --pv:100 } .ttw-look .ttw-pv-dark .ttw-pie-face{ --pie:var(--g); --track:#242424 } .ttw-look .ttw-pv-dark .ttw-pie-val{ color:#fff } .ttw-look .ttw-pv-dark .ttw-pie-l{ color:#d0d0d0 } .ttw-look .ttw-pv-dark .ttw-pie-s{ color:#a8a8a8 } .ttw-look .ttw-pv-light .ttw-pie-face{ --pie:#c9a227; --track:#ded8ca } .ttw-look .ttw-pv-light .ttw-pie-val{ color:#1a1a1a } .ttw-look .ttw-pv-light .ttw-pie-l{ color:#3c3a35 } .ttw-look .ttw-pv-light .ttw-pie-s{ color:#5f5c55 } .ttw-look .ttw-pv-mperf .ttw-pie-face{ --pie:#63b3ff; --track:#16283c } .ttw-look .ttw-pv-mperf .ttw-pie-val{ color:#fff } .ttw-look .ttw-pv-mperf .ttw-pie-l{ color:#cfe0f2 } .ttw-look .ttw-pv-mperf .ttw-pie-s{ color:#8fa6c2 } .ttw-look .ttw-langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:20px; } .ttw-look .ttw-lang{ display:flex; align-items:center; gap:14px; padding:17px 19px; background:var(--card); border:1px solid var(--line); border-radius:14px; } .ttw-look .ttw-lang b{ display:block; color:#fff; font-size:.93rem; font-weight:600; } .ttw-look .ttw-lang em{ display:block; font-style:normal; color:var(--mute); font-size:.75rem; margin-top:2px; } .ttw-look .ttw-flag{ width:44px; height:29px; border-radius:4px; flex:none; display:block; background-size:cover; background-position:center; background-repeat:no-repeat; border:1px solid rgba(255,255,255,.18); box-shadow:0 1px 4px rgba(0,0,0,.4); } /* REAL FLAGS, AS SVG IN THE STYLESHEET. These were drawn with gradients, and two of the three were wrong in a way a Tunisian reader notices at once: the "UK" flag had the saltire but not the upright cross, so it read as a blue X-flag rather than a Union Jack, and Tunisia was a white disc on a red field — which is the TURKISH arrangement. The Tunisian flag is a red crescent with a star in its opening, and neither that nor a Union Jack can be built from gradients. An inline SVG in a data URI can, and it costs no extra request: the browser paints it straight out of this stylesheet. It is CSS, not markup, so the Back Office editor never sees it and cannot strip it. The Arabic row is the Tunisian flag on purpose — the language is Arabic, the audience is Tunisia, and the two are not the same thing. */ .ttw-look .ttw-flag--uk{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3CclipPath%20id%3D%22t%22%3E%3Cpath%20d%3D%22M30%2C15%20h30%20v15%20z%20v15%20h-30%20z%20h-30%20v-15%20z%20v-15%20h30%20z%22%2F%3E%3C%2FclipPath%3E%3Cpath%20d%3D%22M0%2C0%20v30%20h60%20v-30%20z%22%20fill%3D%22%2300247d%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20stroke%3D%22%23fff%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M0%2C0%20L60%2C30%20M60%2C0%20L0%2C30%22%20clip-path%3D%22url%28%23t%29%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2210%22%2F%3E%3Cpath%20d%3D%22M30%2C0%20v30%20M0%2C15%20h60%22%20stroke%3D%22%23cf142b%22%20stroke-width%3D%226%22%2F%3E%3C%2Fsvg%3E"); } .ttw-look .ttw-flag--fr{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Crect%20width%3D%223%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23002395%22%2F%3E%3Crect%20x%3D%222%22%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23ed2939%22%2F%3E%3C%2Fsvg%3E"); } .ttw-look .ttw-flag--tn{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2030%2020%22%3E%3Crect%20width%3D%2230%22%20height%3D%2220%22%20fill%3D%22%23e70013%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2210%22%20r%3D%226%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2214.5%22%20cy%3D%2210%22%20r%3D%224.5%22%20fill%3D%22%23e70013%22%2F%3E%3Ccircle%20cx%3D%2215.9%22%20cy%3D%2210%22%20r%3D%223.7%22%20fill%3D%22%23fff%22%2F%3E%3Cpolygon%20points%3D%2217.25%2C7.95%2017.71%2C9.37%2019.20%2C9.37%2017.99%2C10.24%2018.45%2C11.66%2017.25%2C10.78%2016.05%2C11.66%2016.51%2C10.24%2015.30%2C9.37%2016.79%2C9.37%22%20fill%3D%22%23e70013%22%2F%3E%3C%2Fsvg%3E"); } /* The gating note under the appearance picker. It names the two plans in the product's own words and links to the shop, so a free user who picks M Performance and finds it locked already knew that was the deal. */ .ttw-look .ttw-mfy-note{ margin:26px 0 0; padding:16px 20px; border-radius:13px; text-align:center; background:var(--g-dim); border:1px solid var(--g-line); font-size:.86rem; line-height:1.65; color:#cfcfcf; } .ttw-look .ttw-mfy-note b{ color:#fff; font-weight:600; } /* the note is two phrases on two lines, so the paragraph margins are reset and re-set here rather than inherited from the browser's 1em */ .ttw-look .ttw-mfy-note p{ margin:0; } .ttw-look .ttw-mfy-note p + p{ margin-top:7px; } .ttw-look .ttw-langs-lead{ margin:30px 0 0; text-align:center; font-size:.86rem; color:var(--mute); line-height:1.6; } .ttw-look .ttw-mfy-note a{ color:var(--g); text-decoration:none; border-bottom:1px solid var(--g-line); } .ttw-look .ttw-mfy-note a:hover{ border-bottom-color:var(--g); } /* ============================================================================ 5. GETTING STARTED (.ttw-steps) Three steps. This section exists because the two CTAs above it ("get the app", "buy a key") never said what happens after the tap. ============================================================================ */ .ttw-steps .ttw-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; } .ttw-steps .ttw-step{ padding:28px 26px; background:var(--card); border:1px solid var(--line); border-radius:18px; position:relative; } .ttw-steps .ttw-num{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:11px; background:var(--g); color:#111; font-family:Montserrat,sans-serif; font-weight:800; font-size:1rem; margin-bottom:15px; } .ttw-steps .ttw-step h3{ color:#fff; font-family:Montserrat,sans-serif; font-size:1rem; font-weight:700; margin:0 0 9px; } .ttw-steps .ttw-step p{ color:var(--body); font-size:.89rem; line-height:1.6; margin:0; } .ttw-steps .ttw-step p b{ color:#cfcfcf; font-weight:600; } .ttw-steps .ttw-note{ margin:30px auto 0; max-width:720px; text-align:center; font-size:.86rem; line-height:1.65; color:var(--mute); } .ttw-steps .ttw-note i{ color:var(--g); } /* ============================================================================ 6. SMART KEY HARDWARE (.ttw-key) The two cards, as products rather than as features: Tunitag Smart Key (black, available now) and Tunitag Intelligent Key (red, coming). The class names are --smart and --intelligent for the same reason the copy never says "Basic" or "VIP" — those are internal UserGroup enum names and must not leak into anything a customer, or a future maintainer, reads as a product name. ============================================================================ */ .ttw-key .ttw-grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; } .ttw-key .ttw-prod{ padding:30px 28px; border-radius:20px; background:var(--card); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s, background .35s; } .ttw-key .ttw-prod:hover{ transform:translateY(-5px); background:var(--card2); } .ttw-key .ttw-prod--smart:hover{ border-color:var(--g-line); } .ttw-key .ttw-prod--intelligent{ background:linear-gradient(150deg,rgba(226,60,60,.08),#111 55%); border-color:rgba(226,60,60,.28); } .ttw-key .ttw-prod--intelligent:hover{ border-color:rgba(226,60,60,.5); } .ttw-key .ttw-prod-top{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; } .ttw-key .ttw-prod h3{ color:#fff; font-family:Montserrat,sans-serif; font-size:1.22rem; font-weight:700; margin:0; } .ttw-key .ttw-tagv{ font-size:.64rem; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; padding:6px 12px; border-radius:999px; white-space:nowrap; } .ttw-key .ttw-prod--smart .ttw-tagv{ background:var(--g-dim); color:var(--g); border:1px solid var(--g-line); } .ttw-key .ttw-prod--intelligent .ttw-tagv{ background:rgba(226,60,60,.16); color:#ff8a8a; border:1px solid rgba(226,60,60,.4); } /* the card itself, drawn in CSS: a rounded slab with a chip and a ring */ /* ---------- the product photo ---------- This was a card drawn out of divs: a rounded box with a gradient, a sheen, a fake chip, a fake ring and the wordmark set in Montserrat (.ttw-slab). It looked like a card the way a diagram looks like a car. The designer's real artwork replaced it, so the mock and all six of its child rules are gone rather than left behind to rot. It was then a front/back pair, crossfading on hover. The artwork is one panel per product showing both faces already, so the pair — and the flip — were retired rather than kept as a flip that reveals nothing. It was then a black plate, screen-blended so its background resolved to the card behind it and only the product showed. **The artwork is now a scene** — the cards on a brushed-silver backdrop with slashes in the corners — and screen blending a silver backdrop does the opposite of vanish: #ccc over #111 resolves to about #cfcfcf, so the "invisible" panel becomes a glowing near-white box. The blend is gone. What replaces it is a frame: the scene is shown whole, backdrop and all, as a rounded tile on the card. The wrapper carries the radius and the clip, so nothing has to be masked on the image itself and the artwork's own corners are not rounded twice. The source PNGs are 1024x726 and are installed at that size. Both the frame and the hover change of --card to --card2 are plain CSS with nothing to blend. */ .ttw-key .ttw-cardimg{ position:relative; width:100%; max-width:340px; margin:0 auto 24px; border-radius:12px; overflow:hidden; } .ttw-key .ttw-ci{ display:block; width:100%; height:auto; } .ttw-key .ttw-feats{ list-style:none; margin:0 0 24px; padding:0; display:grid; gap:11px; } .ttw-key .ttw-feats li{ display:flex; align-items:flex-start; gap:11px; font-size:.89rem; line-height:1.5; color:#c9c9c9; } .ttw-key .ttw-feats li i{ color:var(--g); font-size:13px; margin-top:4px; flex:none; } .ttw-key .ttw-prod--intelligent .ttw-feats li i{ color:#e86666 } .ttw-key .ttw-buy{ margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .ttw-key .ttw-price{ font-family:Montserrat,sans-serif; font-size:1.5rem; font-weight:800; color:#fff; } .ttw-key .ttw-price em{ font-style:normal; display:block; font-size:.68rem; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; color:var(--mute); margin-top:3px; } /* The per-month line states plainly that nothing is paid monthly. It exists because dividing a one-time price by twelve is a comparison, not a subscription, and a reader who mistakes it for one is being misled by us. */ .ttw-key .ttw-permo{ flex:1 1 100%; order:3; padding-top:14px; border-top:1px solid var(--line); font-size:.82rem; line-height:1.55; color:var(--body); } .ttw-key .ttw-permo b{ color:var(--g); font-weight:700; } /* White on e23636 measures 4.36:1 and fails AA at this button's size (0.72rem bold is not "large text" — that needs 18.66px). Deepened to cf2c2c, which is the same red to the eye and 5.2:1 with white. Measured, not guessed. */ .ttw-key .ttw-btn-intelligent{ background:#cf2c2c; color:#fff; } .ttw-key .ttw-btn-intelligent:hover{ background:#b32222; color:#fff; transform:translateY(-2px); } /* ============================================================================ 7. COMPARE PLANS (.ttw-tiers) ============================================================================ */ .ttw-tiers{ background:#0d0d0d; } .ttw-tiers .ttw-table{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; } .ttw-tiers .ttw-table caption{ text-align:start; color:var(--mute); font-size:.84rem; padding:0 0 16px; } .ttw-tiers .ttw-table th, .ttw-tiers .ttw-table td{ padding:15px 18px; text-align:center; border-bottom:1px solid var(--line); } .ttw-tiers .ttw-table thead th{ border-bottom:1px solid #2e2e2e; } .ttw-tiers .ttw-table tbody th{ text-align:start; color:#d6d6d6; font-weight:400; font-size:.89rem; } .ttw-tiers .ttw-table td{ color:#cfcfcf; } .ttw-tiers .ttw-th-name{ display:block; font-family:Montserrat,sans-serif; font-size:.95rem; font-weight:700; color:#fff; } .ttw-tiers .ttw-th-sub{ display:block; font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--mute); margin-top:4px; } .ttw-tiers .ttw-col-intelligent{ background:linear-gradient(180deg,rgba(226,60,60,.07),transparent); } .ttw-tiers .ttw-col-smart{ background:rgba(212,175,55,.05); } .ttw-tiers .ttw-yes{ color:var(--g); font-size:15px; } .ttw-tiers .ttw-no{ color:#4a4a4a; } /* A short qualifier under a tick, for the one row whose cell says what is coming rather than merely yes or no. Stacked rather than inline because table cells here are centred: an icon with a sentence after it puts a ragged centred block beside a centred glyph, and the two never align. */ .ttw-tiers .ttw-td-note{ display:block; margin-top:7px; font-size:.72rem; line-height:1.5; color:var(--mute); } .ttw-tiers .ttw-table tfoot td{ border-bottom:0; padding-top:22px; } /* two buttons in the footer: space them without relying on whitespace */ .ttw-tiers .ttw-table tfoot .ttw-btn + .ttw-btn{ margin-inline-start:12px; } .ttw-tiers .ttw-foot{ margin:22px auto 0; max-width:760px; text-align:center; font-size:.84rem; line-height:1.65; color:var(--mute); } /* ============================================================================ 8. COMMUNITY (.ttw-comm) The board is the app's own accent, not the brand gold: the product differentiates the community surface (AppColors.leaderboardAccent, #4DA3FF), so the drawing of it does too. --lb is declared here rather than on .ttw so it cannot leak into a section that has no business being blue. The board is a picture of the app, not a control. The chips are spans, not buttons: focusable elements that cannot act are a keyboard trap, and a marketing mock does not need a live API. ============================================================================ */ .ttw-comm{ --lb:#4da3ff; --lb-dim:rgba(77,163,255,.14); --lb-line:rgba(77,163,255,.34); } .ttw-comm .ttw-comm-grid{ display:grid; grid-template-columns:1fr 1.02fr; gap:54px; align-items:start; } /* ---------- the argument ---------- */ .ttw-comm .ttw-comm-facts{ list-style:none; margin:0; padding:0; display:grid; gap:22px; } .ttw-comm .ttw-comm-facts li{ display:flex; gap:15px; align-items:flex-start; } .ttw-comm .ttw-comm-facts .ttw-ico{ margin-top:1px; } .ttw-comm .ttw-comm-facts b{ display:block; color:#fff; font-family:Montserrat,sans-serif; font-size:.98rem; font-weight:700; line-height:1.32; margin-bottom:7px; letter-spacing:-.2px; } .ttw-comm .ttw-comm-facts p{ color:var(--body); font-size:.875rem; line-height:1.62; margin:0; } .ttw-comm .ttw-comm-facts p b{ display:inline; font-family:inherit; font-size:inherit; font-weight:600; color:#cfcfcf; margin:0; letter-spacing:0; } /* ---------- the avatar set ---------- */ .ttw-comm .ttw-comm-avs{ margin-top:30px; padding:22px 22px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px; } .ttw-comm .ttw-comm-avs-h{ display:block; font-family:Montserrat,sans-serif; font-size:.68rem; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--lb); margin-bottom:15px; } .ttw-comm .ttw-comm-av-row{ display:flex; flex-wrap:wrap; gap:9px; } .ttw-comm .ttw-comm-av{ position:relative; flex:none; line-height:0; } .ttw-comm .ttw-comm-av img{ display:block; width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.13); } /* the free three carry the accent ring, matching LbAvatarCircle's selected state; a gold ring is reserved for nothing here on purpose. */ .ttw-comm .ttw-comm-av--free img{ border-color:var(--lb); box-shadow:0 0 0 2px var(--lb-dim); } .ttw-comm .ttw-comm-avs-note{ margin:16px 0 0; color:var(--mute); font-size:.79rem; line-height:1.6; } .ttw-comm .ttw-comm-avs-note b{ color:#cfcfcf; font-weight:600; } /* ---------- the board ---------- */ .ttw-comm .ttw-comm-board{ background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px 20px 18px; } .ttw-comm .ttw-comm-board-top{ display:grid; gap:4px; margin-bottom:16px; } .ttw-comm .ttw-comm-board-top b{ color:#fff; font-family:Montserrat,sans-serif; font-size:1.06rem; font-weight:800; letter-spacing:-.2px; } .ttw-comm .ttw-comm-board-top span{ color:var(--mute); font-size:.78rem; } .ttw-comm .ttw-comm-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-bottom:9px; } .ttw-comm .ttw-comm-chips em{ font-style:normal; color:var(--mute); font-size:.7rem; font-weight:600; letter-spacing:.4px; margin-inline-end:2px; } .ttw-comm .ttw-comm-chips span{ padding:5px 12px; border-radius:999px; font-size:.73rem; font-weight:600; color:#9a9a9a; background:#161616; border:1px solid #232323; } .ttw-comm .ttw-comm-chips span.is-on{ color:#0a0a0a; background:var(--lb); border-color:var(--lb); font-weight:700; } .ttw-comm .ttw-comm-chips--scope span.is-on{ color:#0a0a0a; } .ttw-comm .ttw-comm-chips--quiet{ margin-bottom:15px; } .ttw-comm .ttw-comm-chips--quiet span{ font-size:.7rem; padding:4px 10px; } .ttw-comm .ttw-comm-rows{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } /* ---------- the rows cascade inside the panel ---------- The board is one .ttw-rv, so all five rows used to arrive together as a single block. They are staggered now, and the useful part is what they are staggered with: TRANSFORM ONLY, NOT OPACITY. That is not a detail. The panel around these rows is itself mid-fade when they start, and an opacity on a child multiplies with its parent's — so if the rows faded too, the first of them would have landed while the panel was still mostly transparent and read as dimmer than the last. Moving them without fading them keeps all five equally bright while still giving the board a sequence. The delays are offset past the panel's own reveal, not aligned with it. The board is the second child of its grid, so .ttw-rv gives it .13s, and 0.72s of fade after that. These start at .34s and end at .58s, inside that window — so what you see is the panel materialising and its rows filling in, rather than two unrelated animations running side by side. Safe to animate transform here, and checked rather than assumed: .ttw-comm-row declares no transition and no hover transform, so there is nothing for the animation to replace — the failure mode the .ttw-rv comment documents. */ .ttw-comm .ttw-comm-row{ transform:translateY(12px); } .ttw-comm.is-in .ttw-comm-row{ transform:none; animation:ttwCommRow .55s cubic-bezier(.22,.61,.36,1) backwards; } @keyframes ttwCommRow{ from{ transform:translateY(12px) } to{ transform:none } } .ttw-comm.is-in .ttw-comm-row:nth-child(1){ animation-delay:.34s } .ttw-comm.is-in .ttw-comm-row:nth-child(2){ animation-delay:.40s } .ttw-comm.is-in .ttw-comm-row:nth-child(3){ animation-delay:.46s } .ttw-comm.is-in .ttw-comm-row:nth-child(4){ animation-delay:.52s } .ttw-comm.is-in .ttw-comm-row:nth-child(5){ animation-delay:.58s } /* the same clamp as the .ttw-rv list above, for the same reason: a sixth board row must not jump ahead of the fifth */ .ttw-comm.is-in .ttw-comm-row:nth-child(n+6){ animation-delay:.58s } .ttw-comm .ttw-comm-row{ display:grid; grid-template-columns:26px 44px 1fr auto; align-items:center; gap:13px; padding:9px 13px; border-radius:13px; background:#0e0e0e; border:1px solid var(--line); } .ttw-comm .ttw-comm-rank{ font-family:Montserrat,sans-serif; font-size:.86rem; font-weight:800; color:var(--lb); text-align:center; font-variant-numeric:tabular-nums; } .ttw-comm .ttw-comm-av-s{ line-height:0; } .ttw-comm .ttw-comm-av-s img{ display:block; width:44px; height:44px; border-radius:50%; border:1.5px solid var(--lb-line); } .ttw-comm .ttw-comm-id{ min-width:0; } .ttw-comm .ttw-comm-id b{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#fff; font-size:.875rem; font-weight:600; line-height:1.3; } .ttw-comm .ttw-comm-id i{ display:block; font-style:normal; color:var(--mute); font-size:.75rem; margin-top:3px; } .ttw-comm .ttw-comm-key{ display:inline-flex; align-items:center; gap:5px; font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:999px; color:var(--lb); background:var(--lb-dim); border:1px solid var(--lb-line); } .ttw-comm .ttw-comm-key i{ font-size:.66rem; margin:0; } .ttw-comm .ttw-comm-you{ font-style:normal; font-size:.6rem; font-weight:700; letter-spacing:.7px; text-transform:uppercase; padding:3px 8px; border-radius:999px; color:#0a0a0a; background:var(--lb); } .ttw-comm .ttw-comm-pts{ font-family:Montserrat,sans-serif; font-size:.92rem; font-weight:800; color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums; } .ttw-comm .ttw-comm-pts em{ font-style:normal; font-weight:600; font-size:.66rem; color:var(--mute); margin-inline-start:2px; } /* the viewer's own row, lifted the way the app lifts it */ .ttw-comm .ttw-comm-row--you{ background:linear-gradient(120deg,var(--lb-dim),#0e0e0e 62%); border-color:var(--lb-line); } .ttw-comm .ttw-comm-av-s--you img{ border-color:var(--lb); border-width:2px; } .ttw-comm .ttw-comm-foot{ display:flex; align-items:flex-start; gap:9px; margin:15px 0 0; color:var(--mute); font-size:.76rem; line-height:1.55; } .ttw-comm .ttw-comm-foot i{ color:var(--lb); font-size:.86rem; margin-top:2px; } /* The board's row grid is the one place on this page with four columns of fixed width, so it is the first thing to run out of room. Below 460px the rank and avatar shrink and the badge wraps under the name rather than the row scrolling sideways. */ @media (max-width:900px){ .ttw-comm .ttw-comm-grid{ grid-template-columns:1fr; gap:38px; } } @media (max-width:460px){ .ttw-comm .ttw-comm-row{ grid-template-columns:20px 36px 1fr auto; gap:10px; padding:9px 11px; } .ttw-comm .ttw-comm-av-s img{ width:36px; height:36px; } .ttw-comm .ttw-comm-id b{ font-size:.82rem; } .ttw-comm .ttw-comm-pts{ font-size:.84rem; } .ttw-comm .ttw-comm-chips span{ font-size:.69rem; padding:4px 10px; } } /* ============================================================================ 9. FAQ (.ttw-faq)
/, so it works with no JavaScript at all. Two columns on a wide screen: one column of eight questions is a scroll, two is a glance. ============================================================================ */ .ttw-faq{ background:#0d0d0d; } .ttw-faq .ttw-cols{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; align-items:start; } .ttw-faq details{ background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s, background .3s; } .ttw-faq details[open]{ border-color:var(--g-line); background:var(--card2); } .ttw-faq summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; list-style:none; color:#fff; font-size:.94rem; font-weight:600; line-height:1.45; } .ttw-faq summary::-webkit-details-marker{ display:none; } .ttw-faq summary i{ color:var(--g); font-size:13px; flex:none; transition:transform .3s; } .ttw-faq details[open] summary i{ transform:rotate(180deg); } .ttw-faq .ttw-ans{ padding:0 22px 20px; } .ttw-faq .ttw-ans p{ color:var(--body); font-size:.89rem; line-height:1.68; margin:0; } .ttw-faq .ttw-ans p + p{ margin-top:11px; } .ttw-faq .ttw-more{ text-align:center; margin-top:34px; } /* ============================================================================ 10. THE CLOSING (.ttw-close) This section used to be a call to action and cannot be one any more. The page offers the app in one place (the hero) and the keys in one place (the keys section), so a third set of buttons here would call for something the reader has already been offered twice — which is the fatigue this whole pass exists to remove. What it does instead is land the page: a statement and four facts, all of them true of the free app and all of them already established above. No buttons, and not even a quiet link. If a close needs a button to feel finished, the sections above it are not finished. The gold glow is kept from the CTA it replaces. It was the one thing about the old section that worked, and it gives the page a floor instead of an edge. ============================================================================ */ .ttw-close{ text-align:center; padding:96px 0 92px; background: radial-gradient(ellipse 60% 70% at 50% 0%,rgba(212,175,55,.11),transparent 70%), #0a0a0a; } .ttw-close .ttw-close-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin:44px auto 0; max-width:1080px; text-align:start; } .ttw-close .ttw-close-item{ display:flex; flex-direction:column; align-items:flex-start; padding:26px 24px; border-radius:18px; background:var(--card); border:1px solid var(--line); transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s; } .ttw-close .ttw-close-item:hover{ transform:translateY(-4px); border-color:var(--g-line); } .ttw-close .ttw-close-item .ttw-ico{ margin-bottom:15px; } .ttw-close .ttw-close-item b{ color:#fff; font-family:Montserrat,sans-serif; font-weight:700; font-size:1.02rem; line-height:1.3; } .ttw-close .ttw-close-item p{ color:var(--body); font-size:.86rem; line-height:1.62; margin:10px 0 0; } .ttw-close .ttw-small{ margin:30px auto 0; max-width:640px; font-size:.82rem; line-height:1.7; color:var(--mute); } /* ============================================================================ RESPONSIVE The desktop composition is the intended one above 860px, which is where the variant gate switches to the mobile blocks. These rules only cover the band between 861px and a comfortable desktop, plus a tablet fallback in case the gate is ever removed: the grid must not be allowed to produce 90px columns. ============================================================================ */ @media (max-width:1040px){ .ttw-scan .ttw-grid2{ grid-template-columns:1fr; gap:40px; } .ttw-garage .ttw-grid4{ grid-template-columns:repeat(2,1fr); } /* the closing's four facts are sentences, so they go two-up before the cards above them need to */ .ttw-close .ttw-close-grid{ grid-template-columns:repeat(2,1fr); } /* four claims in a row stop being readable before the cards above them do — each one is a sentence, so they go two-up first */ .ttw-claims .ttw-claims-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .ttw{ padding:68px 0 62px; } .ttw-strip .ttw-grid3, .ttw-steps .ttw-grid3, .ttw-look .ttw-mocks, .ttw-look .ttw-langs{ grid-template-columns:1fr; } .ttw-core .ttw-cats, .ttw-key .ttw-grid2, .ttw-faq .ttw-cols{ grid-template-columns:1fr; } .ttw-tiers .ttw-wrap{ overflow-x:auto; } .ttw-tiers .ttw-table{ min-width:600px; } } /* These two four-item bands go 4 -> 2 -> 1 in explicit steps rather than auto-fit. A four-item set that breaks 3 + 1 reads worse than 2 + 2, which auto-fit would produce at the in-between widths. */ @media (max-width:620px){ .ttw-claims .ttw-claims-grid{ grid-template-columns:1fr; gap:22px; } .ttw-close .ttw-close-grid{ grid-template-columns:1fr; gap:16px; } } @media (prefers-reduced-motion:reduce){ /* the base state is hidden, so this must both un-hide and un-animate */ .ttw-rv{ opacity:1 !important; transform:none !important; } .ttw.is-in .ttw-rv{ animation:none !important; } /* the board's rows move rather than fade, so they need un-moving: without this they would sit 12px low for the rest of the page's life, because nothing else resets a transform that is declared on the element itself */ .ttw-comm .ttw-comm-row{ transform:none !important; } .ttw-comm.is-in .ttw-comm-row{ animation:none !important; } .ttw-scan .ttw-paper::before{ animation:none !important; } .ttw-cardw:hover, .ttw-btn:hover, .ttw-cat:hover, .ttw-prod:hover, .ttw-mock:hover{ transform:none !important; } } /* no-JS safety net: everything above is inert until .is-in lands */ @media (scripting: none){ .ttw-rv{ opacity:1 !important; transform:none !important; } /* the rows are never hidden, only shifted — but 12px is 12px, and with no script the .is-in class never arrives to take it back */ .ttw-comm .ttw-comm-row{ transform:none !important; } } /* ============================================================================ RTL The layout above is written in logical properties, so Arabic mirrors on its own. These are the places where that was not possible: the tier column shading is a physical gradient and the FAQ chevron sits at the end of a row. THE FLAGS USED TO BE MIRRORED HERE AND NO LONGER ARE. They were gradient drawings, so mirroring them was the only way to keep the "light" side of the image facing the text. Two reasons that was wrong anyway: a national flag is not a direction — mirrored, the French tricolour flies red at the hoist — and the flags are now SVG images, which flip the crescent and the cross into nonsense. Nothing needs to replace this rule; the flag simply keeps its own orientation in both directions, as a flag does. ============================================================================ */ /* ============================================================================ VARIANT GATE FOR THE NEW SECTIONS The gate for the original four desktop blocks lives in the generated mobile region above and cannot be edited by hand (a regeneration would drop the change). This rule does the same job for the .ttw sections, from outside that region, and being later in the file it wins on equal specificity anyway. Same guard as the original: only hide the desktop composition on a page that actually has a mobile one. An unconditional rule would blank /fr/ and /ar/ — whose mobile blocks have not been pasted yet — with nothing to take their place. ============================================================================ */ @media (max-width:860px){ body:has(.ttmob-mobile) .ttw{ display:none !important; } } /* ============================================================================ NO SEAM BETWEEN THE NEW BLOCKS The wrapper the blocks module puts around each block carries `mb-4`. With fourteen sections that is fourteen visible gaps, so they are zeroed here — but only on a wrapper that actually holds one of these blocks, so nothing else on the page is touched. Same guard as the mobile rule above. ============================================================================ */ .block:has(.ttw){ margin-bottom: 0 !important; } /* ============================================================================ MERGED SECTIONS The keys section is one product card followed by the table that separates the two products. The table only means anything next to the cards it describes, so both halves live in one card and the join between them is drawn rather than left to a gap. The steps section used to be the other one of these — it is only the steps now. ============================================================================ */ /* The second half's heading is an h3 under the section's h2: the page has one h2 per section and this is the second half of one section, not a section of its own. Sized a step below .ttw h2 so the hierarchy is visible, not stated. */ .ttw .ttw-start-h{ color:#fff; font-family:Montserrat,sans-serif; font-weight:800; margin:0; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.18; letter-spacing:-.3px; } .ttw .ttw-start-h em{ font-style:normal; color:var(--g); } /* the join, drawn rather than implied by a gap */ .ttw-key .ttw-tiers{ position:relative; padding-top:56px; border-top:1px solid var(--line); background:transparent; margin-top:56px; } .ttw-key .ttw-tiers .ttw-head{ margin-top:0; } /* the table's own section padding would double up inside the shared card */ .ttw-key .ttw-tiers .ttw-wrap{ margin-top:0; } /* ==== BEGIN GENERATED — BMW MODELS PAGE (.ttb) ==== */ /* BMW MODELS PAGE (.ttb — /bmw-models) Generated by tools/build_bmw_models_page.py. Do not edit by hand. */ .ttb, .ttb *, .ttb *::before, .ttb *::after{ box-sizing:border-box; } .ttb{ --g:#d4af37; --g-dim:rgba(212,175,55,.13); --g-line:rgba(212,175,55,.28); --page:#0a0a0a; --card:#111111; --card2:#0e0e0e; --line:#222222; /* --body and --mute are the design system's own values, from tunitag-blocks.css. Not invented here, and not the #6f6f76 that pages/download.html uses for its note text — that one measures 3.97:1 on #0a0a0a and fails AA, which the verifier for this page caught when the same value was copied in. #8a8a8a measures 5.7:1. */ --body:#9c9c9c; --mute:#8a8a8a; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--page); color:#fff; overflow:hidden; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; padding:84px 0 76px; } .ttb-glow{ position:absolute; left:50%; top:-140px; width:900px; height:900px; margin-left:-450px; background:radial-gradient(circle,rgba(212,175,55,.11) 0%,rgba(212,175,55,.03) 40%,transparent 68%); pointer-events:none; } .ttb-inner{ position:relative; max-width:1120px; margin:0 auto; padding:0 22px; z-index:2; } /* ---------- hero ---------- */ .ttb-hero{ max-width:660px; margin-bottom:40px; } .ttb-eyebrow{ color:var(--g); font-family:Montserrat,sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:14px; } .ttb h2{ font-family:Montserrat,sans-serif; font-size:clamp(2rem,5vw,3.1rem); font-weight:800; margin:0 0 18px; line-height:1.08; letter-spacing:-1px; color:#fff; } .ttb h2 span{ color:var(--g); } .ttb-lede{ color:#a8a8ae; font-size:1.04rem; line-height:1.65; margin:0 0 22px; } /* the three figures, stated plainly — this page's whole claim is its size */ .ttb-stats{ display:flex; flex-wrap:wrap; gap:14px 30px; } .ttb-stat{ display:flex; align-items:baseline; gap:8px; } .ttb-stat b{ font-family:Montserrat,sans-serif; font-size:1.5rem; font-weight:800; color:var(--g); font-variant-numeric:tabular-nums; } .ttb-stat span{ color:var(--mute); font-size:.82rem; letter-spacing:.4px; } /* ---------- tools ---------- */ /* THE STICKY OFFSET IS MEASURED, NOT ASSUMED. tunitag.com has a sticky header (the theme ships Bootstrap's .sticky-top, and custom.css uses overflow-x:clip on the root specifically to keep sticky working). A bar pinned to top:0 would slide underneath that header and hide the search box behind it — on a 166-row page, the one control that matters most. --ttb-top is set by the script to the height of whatever the page's own sticky header is, and stays 0 when there is none, which is the case in local preview. So this is correct in both places instead of correct in one. */ /* THE CONTROLS ARE REVEALED BY THE SCRIPT, NOT HIDDEN BY IT. The search field is created by the script (an

— "Supported BMW Models" on the live page — so this block starts one level down: hero h2, category h3, series h4. One h1 per page. */ .ttb h4{ font-family:Montserrat,sans-serif; font-size:.9rem; font-weight:700; color:#fff; margin:0 0 12px; display:flex; align-items:center; gap:9px; } .ttb-rows{ list-style:none; margin:0; padding:0; display:grid; gap:7px; } .ttb-row{ display:flex; align-items:baseline; gap:9px; } .ttb-row[hidden]{ display:none; } .ttb-row::before{ content:""; flex:none; width:5px; height:5px; border-radius:50%; background:var(--g); opacity:.42; transform:translateY(-2px); } .ttb-model{ color:#c9c9c9; font-size:.87rem; line-height:1.5; } /* the chassis code leads most names, and is what gets searched — lift it out of the sentence without having to parse the name and risk being wrong */ .ttb-model b{ color:#fff; font-weight:700; } .ttb-empty{ display:none; color:var(--body); font-size:.95rem; padding:34px 0 10px; text-align:center; } .ttb-empty.is-on{ display:block; } .ttb-empty b{ color:var(--g); } /* ---------- footer ---------- */ .ttb-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; background:var(--card); border:1px solid var(--line); border-left:3px solid var(--g); border-radius:16px; padding:24px 26px; margin:20px 0 34px; } .ttb-cta p{ flex:1 1 330px; margin:0; color:var(--body); font-size:.92rem; line-height:1.6; } .ttb-cta p b{ color:#fff; font-weight:600; } .ttb-btn{ display:inline-flex; align-items:center; gap:10px; background:var(--g); color:#111; font-weight:700; font-size:.85rem; padding:13px 24px; border-radius:12px; text-decoration:none; transition:background .25s, transform .25s; } .ttb-btn:hover{ background:#e0bd45; transform:translateY(-2px); color:#111; } .ttb-legal{ color:var(--mute); font-size:.76rem; line-height:1.65; margin:0; } .ttb-legal b{ color:#8a8a90; font-weight:600; } /* ---------- narrow ---------- */ @media (max-width:860px){ .ttb-groups{ grid-template-columns:1fr; } } @media (max-width:620px){ .ttb{ padding:62px 0 58px; } .ttb-tools{ padding:12px 0 10px; } .ttb-cta{ padding:20px; } } /* ==== END GENERATED — BMW MODELS PAGE (.ttb) ==== */ /* ==== BEGIN GENERATED — DOWNLOAD PAGE (.ttd) ==== */ /* DOWNLOAD PAGE (.ttd — /download) Generated by tools/build_download_page.py. Do not edit by hand. */ .ttd, .ttd *{ box-sizing:border-box; } .ttd{ --ttd-gold:#d4af37; --ttd-gold-dim:rgba(212,175,55,.13); --ttd-gold-line:rgba(212,175,55,.28); --ttd-page:#0a0a0a; --ttd-card:#111111; --ttd-line:#222222; --ttd-body:#9a9a9a; /* --ttd-mute was #6f6f76, which measures 3.97:1 on --ttd-page and fails AA for the small note text it is used on. #8a8a8a measures 5.7:1. The same value was corrected on the models page for the same reason. */ --ttd-mute:#8a8a8a; position:relative; width:100vw; left:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttd-page); color:#fff; overflow:hidden; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; padding:88px 0 80px; } .ttd-glow{ position:absolute; left:50%; top:-120px; width:900px; height:900px; margin-left:-450px; background:radial-gradient(circle,rgba(212,175,55,.11) 0%,rgba(212,175,55,.03) 40%,transparent 68%); pointer-events:none; } .ttd-inner{ position:relative; max-width:1120px; margin:0 auto; padding:0 22px; z-index:2; } /* ---------- hero ---------- */ /* The hero is an

, not an

: the theme renders the CMS page title as the page's

, and a second one would compete with it. */ .ttd-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:48px; margin-bottom:72px; } .ttd-hero-copy{ flex:1 1 330px; min-width:290px; } .ttd-eyebrow{ color:var(--ttd-gold); font-family:Montserrat,sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:14px; } .ttd h2{ font-family:Montserrat,sans-serif; font-size:clamp(2rem,5vw,3.1rem); font-weight:800; margin:0 0 18px; line-height:1.08; letter-spacing:-1px; color:#fff; } .ttd h2 span{ color:var(--ttd-gold); } .ttd-lede{ color:#a8a8ae; font-size:1.06rem; line-height:1.65; margin:0 0 30px; max-width:520px; } /* ---------- store buttons ---------- The icons are FontAwesome glyphs, not inline SVG: the editor keeps roughly half the SVG it is given, and the homepage hero lost all four of its orbit rings that way. .fa-apple and .fa-android are the pair the hero uses. */ .ttd-stores{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; } .ttd-store{ display:inline-flex; align-items:center; gap:13px; padding:14px 26px; border-radius:14px; border:1px solid var(--ttd-line); background:#141414; text-decoration:none; color:#fff; transition:transform .25s, border-color .25s, background .25s; min-width:210px; } .ttd-store:hover{ border-color:var(--ttd-gold-line); background:#181818; transform:translateY(-2px); color:#fff; } .ttd-store i{ flex:none; font-size:25px; line-height:1; } .ttd-store small{ display:block; font-size:.63rem; letter-spacing:1.3px; text-transform:uppercase; color:#8a8a90; font-weight:600; } .ttd-store b{ display:block; font-size:.98rem; font-weight:700; font-family:Montserrat,sans-serif; color:#fff; } .ttd-store.ttd-pending{ opacity:.55; cursor:not-allowed; } .ttd-store.ttd-pending:hover{ transform:none; border-color:var(--ttd-line); background:#141414; } .ttd-note{ color:var(--ttd-mute); font-size:.78rem; margin:14px 0 0; } .ttd-hero-art{ flex:0 1 260px; display:flex; justify-content:center; } .ttd-hero-art img{ width:250px; height:auto; max-width:100%; filter:drop-shadow(0 0 26px rgba(212,175,55,.24)); } /* ---------- section headings ---------- */ .ttd h3{ font-family:Montserrat,sans-serif; font-size:clamp(1.35rem,3vw,1.85rem); font-weight:800; margin:0 0 26px; color:#fff; text-transform:uppercase; letter-spacing:-.4px; } .ttd h3 span{ color:var(--ttd-gold); } .ttd-block{ margin-bottom:64px; } /* ---------- steps ---------- */ .ttd-steps{ display:flex; flex-wrap:wrap; gap:18px; } .ttd-step{ flex:1 1 240px; background:var(--ttd-card); border:1px solid var(--ttd-line); border-radius:16px; padding:24px; position:relative; } .ttd-step-n{ font-family:Montserrat,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:2px; color:var(--ttd-gold); display:block; margin-bottom:10px; } .ttd-step h4{ font-family:Montserrat,sans-serif; font-size:1rem; font-weight:700; margin:0 0 8px; color:#fff; } .ttd-step p{ color:var(--ttd-body); font-size:.88rem; line-height:1.6; margin:0; } .ttd-step p b{ color:#d5d5d5; font-weight:600; } /* ---------- smart key callout ---------- */ .ttd-key{ background:linear-gradient(135deg,rgba(212,175,55,.10),rgba(212,175,55,.03)); border:1px solid var(--ttd-gold-line); border-radius:20px; padding:34px; display:flex; flex-wrap:wrap; gap:26px; align-items:center; } .ttd-key-txt{ flex:1 1 340px; } /* equal specificity to .ttd h3 above, so order decides — this rule is last on purpose and must stay after it. */ .ttd-key h3{ margin-bottom:14px; } .ttd-key p{ color:#b8b8be; font-size:.94rem; line-height:1.68; margin:0 0 12px; } .ttd-key p:last-of-type{ margin-bottom:22px; } .ttd-key p b{ color:#e2e2e2; font-weight:600; } .ttd-key-btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 30px; border-radius:999px; background:var(--ttd-gold); color:#111 !important; text-decoration:none; font-family:Montserrat,sans-serif; font-weight:700; font-size:.8rem; letter-spacing:1.3px; text-transform:uppercase; transition:background .25s, transform .25s; } .ttd-key-btn:hover{ background:#b29126; color:#111 !important; transform:translateY(-2px); } .ttd-key-btn i{ font-size:.85rem; } .ttd-key-facts{ flex:0 1 250px; display:flex; flex-direction:column; gap:12px; } .ttd-fact{ display:flex; gap:11px; align-items:flex-start; font-size:.86rem; color:#c2c2c8; line-height:1.5; } .ttd-fact i{ flex:none; margin-top:3px; color:var(--ttd-gold); font-size:.82rem; } /* ---------- requirements + faq ---------- */ .ttd-req{ display:flex; flex-wrap:wrap; gap:16px; } .ttd-req-card{ flex:1 1 220px; background:var(--ttd-card); border:1px solid var(--ttd-line); border-radius:16px; padding:22px; } .ttd-req-card h4{ font-family:Montserrat,sans-serif; font-size:.92rem; font-weight:700; margin:0 0 12px; color:var(--ttd-gold); } /* logical property, so the list indents from the correct edge in Arabic */ .ttd-req-card ul{ margin:0; padding-inline-start:18px; color:var(--ttd-body); font-size:.86rem; line-height:1.75; } .ttd-req-card li b{ color:#d5d5d5; font-weight:600; } .ttd-faq{ display:flex; flex-direction:column; gap:12px; } .ttd-q{ background:var(--ttd-card); border:1px solid var(--ttd-line); border-radius:14px; padding:20px 24px; } .ttd-q h4{ font-family:Montserrat,sans-serif; font-size:.94rem; font-weight:700; margin:0 0 8px; color:#fff; } .ttd-q p{ color:var(--ttd-body); font-size:.88rem; line-height:1.65; margin:0; } .ttd-q p b{ color:#d5d5d5; font-weight:600; } /* ---------- helpers bar ---------- */ .ttd-help{ margin-top:8px; padding:26px 28px; border-radius:18px; background:var(--ttd-card); border:1px solid var(--ttd-line); text-align:center; } .ttd-help p{ color:var(--ttd-body); font-size:.9rem; margin:0 0 16px; } .ttd-help a.ttd-ghost{ display:inline-flex; align-items:center; gap:9px; padding:13px 28px; border-radius:999px; border:1px solid var(--ttd-gold-line); color:var(--ttd-gold) !important; text-decoration:none; font-family:Montserrat,sans-serif; font-weight:700; font-size:.78rem; letter-spacing:1.3px; text-transform:uppercase; transition:background .25s, border-color .25s; } .ttd-help a.ttd-ghost:hover{ background:var(--ttd-gold-dim); border-color:var(--ttd-gold); } .ttd-ghost i{ font-size:.82rem; } @media (max-width:760px){ .ttd{ padding:64px 0 60px; } .ttd-hero-art{ order:-1; } .ttd-key{ padding:26px 22px; } .ttd-store{ flex:1 1 100%; } } /* ==== END GENERATED — DOWNLOAD PAGE (.ttd) ==== */ /* ==== BEGIN GENERATED — SMART KEY PRODUCT PAGE (.ttp) ==== */ /* SMART KEY PRODUCT PAGE (.ttp — the product's Description field) Generated by tools/build_smart_key_page.py. Do not edit by hand. The first rules neutralise the theme's .product-description wrapper, and they are :has()-scoped so every other product page keeps the theme's box. */ .ttp, .ttp *{ box-sizing:border-box; } .ttp{ --ttp-gold:#d4af37; --ttp-gold-dim:rgba(212,175,55,.13); --ttp-gold-line:rgba(212,175,55,.28); --ttp-page:#0a0a0a; --ttp-card:#111111; --ttp-card2:#0e0e0e; --ttp-line:#222222; --ttp-body:#9c9c9c; --ttp-mute:#8a8a8a; --ttp-ink:#c9c9c9; position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; background:var(--ttp-page); color:#fff; overflow:hidden; font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; padding:72px 0 78px; } .ttp-glow{ position:absolute; left:50%; top:-140px; width:900px; height:900px; margin-left:-450px; background:radial-gradient(circle,rgba(212,175,55,.11) 0%,rgba(212,175,55,.03) 40%,transparent 68%); pointer-events:none; } .ttp-inner{ position:relative; max-width:1120px; margin:0 auto; padding:0 22px; z-index:2; } /* ---------- the theme's product-description wrapper ---------- The Description field renders inside the theme's titled block with a filled panel behind it. This block draws its own surface and runs to both viewport edges, so the wrapper is neutralised — but only where it actually holds a .ttp, because every other product page on the shop keeps the theme's box. overflow:visible is the load-bearing part: a clipped ancestor would cut the 100vw breakout back to the container and leave a dark slab floating in a narrow column. */ .product-description-block:has(.ttp){ background:none; border:0; box-shadow:none; overflow:visible; } .product-description-block:has(.ttp) > .title-block{ display:none; } .product-description-block:has(.ttp) > .block-content.box-bg{ background:none; border:0; box-shadow:none; padding:0; overflow:visible; } .product-description-block:has(.ttp) .product-description.typo{ color:inherit; } /* ---------- reveal ---------- THE HIDDEN STATE IS SCOPED TO .ttp-js, WHICH THE SCRIPT ADDS. Without the script the page is fully visible; with it, the sections rise as they come into view. That is deliberately the opposite of the homepage blocks, which hide their content in CSS and un-hide it from JavaScript — a missing file there is a blank page. Here a missing file costs the animation and nothing else. An animation is a property of this element, so it is an animation and not a transition: nearly every card here also owns a transform for its hover lift, and a transition on the same property is simply replaced by the higher-specificity rule. */ /* .ttp-sec is what the observer watches, and every .ttp-rv is a DESCENDANT of one — never one itself. A section cannot reveal its own contents by being its own target, so nothing carries both classes. */ .ttp.ttp-js .ttp-rv{ opacity:0; transform:translateY(18px); } .ttp.ttp-js .ttp-sec.is-in .ttp-rv{ animation:ttpRise .62s cubic-bezier(.22,.8,.24,1) both; } /* A stagger runs on nth-child, and a child with no matching rule has a delay of 0s — so a thirteenth target would arrive BEFORE the twelfth. The clamp is what stops the rule being outrun. */ .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(1){ animation-delay:.04s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(2){ animation-delay:.10s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(3){ animation-delay:.16s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(4){ animation-delay:.22s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(5){ animation-delay:.28s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(6){ animation-delay:.34s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(7){ animation-delay:.40s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(8){ animation-delay:.46s; } .ttp.ttp-js .ttp-sec.is-in .ttp-stagger > *:nth-child(n+9){ animation-delay:.52s; } @keyframes ttpRise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } } /* ---------- hero ---------- */ .ttp-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:44px; margin-bottom:64px; } .ttp-hero-copy{ flex:1 1 340px; min-width:290px; } .ttp-eyebrow{ color:var(--ttp-gold); font-family:Montserrat,sans-serif; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:4px; display:block; margin-bottom:14px; } /* The product page's own

is the product name, rendered by the theme above this block. So the block starts at

, sections are

and cards

. */ .ttp h2{ font-family:Montserrat,sans-serif; font-size:clamp(2rem,5vw,3.15rem); font-weight:800; margin:0 0 18px; line-height:1.08; letter-spacing:-1px; color:#fff; } .ttp h2 span{ color:var(--ttp-gold); } .ttp-lede{ color:#a8a8ae; font-size:1.06rem; line-height:1.65; margin:0 0 24px; max-width:540px; } .ttp-chips{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:26px; } .ttp-chip{ display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; color:var(--ttp-ink); background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:999px; padding:8px 14px; } .ttp-chip i{ font-size:.7rem; color:var(--ttp-gold); } .ttp-buyline{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 18px; margin-bottom:14px; } .ttp-price{ font-family:Montserrat,sans-serif; font-size:1.9rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; } .ttp-price em{ display:block; font-family:Inter,sans-serif; font-size:.72rem; font-style:normal; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:var(--ttp-mute); margin-top:4px; } .ttp-cta{ display:inline-flex; align-items:center; gap:10px; padding:15px 30px; border-radius:999px; background:var(--ttp-gold); color:#111 !important; text-decoration:none; font-family:Montserrat,sans-serif; font-weight:700; font-size:.82rem; letter-spacing:1.2px; text-transform:uppercase; transition:background .25s, transform .25s; } .ttp-cta:hover{ background:#e0bd45; color:#111 !important; transform:translateY(-2px); } .ttp-cta i{ font-size:.8rem; } .ttp-permo{ color:var(--ttp-mute); font-size:.86rem; line-height:1.6; margin:0; max-width:520px; } .ttp-permo b{ color:var(--ttp-gold); font-weight:700; } /* One panel per product, shown as a rounded tile. The artwork is a scene on a silver backdrop, so it is framed rather than blended — screen blending a light backdrop turns the tile into a glowing white box. The wrapper carries the radius and the clip. Both card faces are in the one panel, so the front/back pair and its hover flip were retired. */ .ttp-art{ position:relative; flex:0 1 360px; min-width:250px; border-radius:14px; overflow:hidden; } .ttp-art img{ display:block; width:100%; height:auto; } /* ---------- section furniture ---------- */ .ttp-block{ margin-bottom:62px; } .ttp h3{ font-family:Montserrat,sans-serif; font-size:clamp(1.32rem,2.9vw,1.8rem); font-weight:800; margin:0 0 12px; color:#fff; letter-spacing:-.4px; } .ttp h3 span{ color:var(--ttp-gold); } .ttp-sub{ color:var(--ttp-body); font-size:.98rem; line-height:1.68; margin:0 0 26px; max-width:760px; } .ttp-sub b{ color:#d5d5d5; font-weight:600; } .ttp-rule{ width:64px; height:3px; background:var(--ttp-gold); border-radius:2px; margin:0 0 28px; } /* ---------- the free baseline ---------- */ .ttp-free{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:22px; } .ttp-free-card{ flex:1 1 300px; min-width:0; background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:16px; padding:22px; } .ttp-free-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px; } .ttp-free-top h4{ font-family:Montserrat,sans-serif; font-size:.98rem; font-weight:700; margin:0; color:#fff; } .ttp-ico{ flex:none; width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:var(--ttp-card2); border:1px solid var(--ttp-line); } .ttp-ico i{ font-size:14px; line-height:1; color:var(--ttp-gold); } .ttp-badge{ margin-left:auto; flex:none; font-size:.66rem; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--ttp-gold); background:var(--ttp-gold-dim); border:1px solid var(--ttp-gold-line); border-radius:999px; padding:4px 10px; } /* SELECTORS HERE ARE DELIBERATELY DOUBLE-SPECIFIC. The Description field is wrapped in .product-description.typo, and the theme carries `.typo ul{margin-bottom:1rem;list-style:initial}` — (0,1,1), one class and one element — which outranks a single-class rule. Left at (0,1,0) every list on the page would grow a default disc marker beside its own dash and a 1rem tail under it. `.ttp ul.ttp-list` is (0,2,1) and the theme cannot reach it. The padding is logical because the theme also ships a real RTL rule, `.lang-rtl .typo ul{padding-right:15px;padding-left:0}`. */ .ttp ul.ttp-list{ list-style:none; margin:0; padding:0; } .ttp ul.ttp-list li{ position:relative; padding:0; padding-inline-start:16px; color:var(--ttp-ink); font-size:.86rem; line-height:1.75; } .ttp ul.ttp-list li::before{ content:""; position:absolute; inset-inline-start:0; top:.62em; width:5px; height:1px; background:var(--ttp-gold); opacity:.55; } .ttp-free-body{ color:var(--ttp-body); font-size:.86rem; line-height:1.72; margin:0; } /* ---------- the two-column comparison ---------- */ .ttp-cmp{ background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:18px; overflow:hidden; } .ttp-cmp-head{ display:grid; grid-template-columns:1fr 132px 152px; gap:12px; padding:16px 20px; background:var(--ttp-card2); } .ttp-cmp-head span{ font-size:.68rem; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--ttp-mute); } .ttp-cmp-head .ttp-h-key{ color:var(--ttp-gold); } .ttp-cmp-row{ display:grid; grid-template-columns:1fr 132px 152px; gap:12px; align-items:center; padding:15px 20px; border-top:1px solid var(--ttp-line); } .ttp-cmp-l{ color:var(--ttp-ink); font-size:.9rem; line-height:1.5; } .ttp-cmp-c{ text-align:center; } .ttp-val{ color:#fff; font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums; } .ttp-yes{ color:var(--ttp-gold); font-size:.9rem; } .ttp-no{ color:var(--ttp-mute); font-size:.9rem; } /* ---------- the five categories ---------- */ .ttp-cats{ display:flex; flex-direction:column; gap:12px; } .ttp-cat{ background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:16px; overflow:hidden; } .ttp-cat[open]{ border-color:var(--ttp-gold-line); } .ttp-cat > summary{ display:flex; align-items:center; gap:13px; padding:17px 20px; cursor:pointer; list-style:none; } .ttp-cat > summary::-webkit-details-marker{ display:none; } .ttp-cat > summary b{ font-family:Montserrat,sans-serif; font-size:.95rem; font-weight:700; color:#fff; } .ttp-cat > summary .ttp-n{ margin-left:auto; font-family:Montserrat,sans-serif; font-size:.72rem; font-weight:800; color:var(--ttp-gold); background:var(--ttp-gold-dim); border:1px solid var(--ttp-gold-line); border-radius:999px; padding:4px 11px; font-variant-numeric:tabular-nums; } .ttp-cat-b{ padding:0 20px 20px; } .ttp-cat-b em{ display:block; color:var(--ttp-body); font-size:.88rem; font-style:normal; line-height:1.66; margin-bottom:14px; padding-top:2px; } .ttp .ttp-cat-b ul.ttp-list{ columns:2; column-gap:26px; } @media (max-width:620px){ .ttp .ttp-cat-b ul.ttp-list{ columns:1; } } /* ---------- steps, limits, faq ---------- */ .ttp-steps{ display:flex; flex-wrap:wrap; gap:16px; } .ttp-step{ flex:1 1 230px; min-width:0; background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:16px; padding:22px; } .ttp-step-n{ font-family:Montserrat,sans-serif; font-size:.7rem; font-weight:800; letter-spacing:2px; color:var(--ttp-gold); display:block; margin-bottom:10px; } .ttp-step h4{ font-family:Montserrat,sans-serif; font-size:.95rem; font-weight:700; margin:0 0 8px; color:#fff; } .ttp-step p{ color:var(--ttp-body); font-size:.87rem; line-height:1.62; margin:0; } .ttp-step p b{ color:#d5d5d5; font-weight:600; } .ttp-nots{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; } .ttp-not{ display:flex; gap:13px; align-items:flex-start; } .ttp-not > i{ flex:none; margin-top:3px; color:var(--ttp-mute); font-size:.85rem; } .ttp-not span{ color:var(--ttp-body); font-size:.92rem; line-height:1.66; } .ttp-not span b{ color:#d5d5d5; font-weight:600; } .ttp-faq{ display:flex; flex-direction:column; gap:11px; } .ttp-q{ background:var(--ttp-card); border:1px solid var(--ttp-line); border-radius:14px; padding:20px 23px; } .ttp-q h4{ font-family:Montserrat,sans-serif; font-size:.94rem; font-weight:700; margin:0 0 8px; color:#fff; } .ttp-q p{ color:var(--ttp-body); font-size:.88rem; line-height:1.66; margin:0; } .ttp-q p b{ color:#d5d5d5; font-weight:600; } .ttp-q a{ color:var(--ttp-gold); text-decoration:none; } .ttp-q a:hover{ text-decoration:underline; } /* ---------- facts strip ---------- */ .ttp-facts{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px; } .ttp-fact{ flex:1 1 240px; min-width:0; background:var(--ttp-card2); border:1px solid var(--ttp-line); border-radius:14px; padding:18px 20px; } .ttp-fact i{ color:var(--ttp-gold); font-size:.95rem; } .ttp-fact b{ display:block; font-family:Montserrat,sans-serif; font-size:.9rem; color:#fff; margin:10px 0 5px; } .ttp-fact span{ color:var(--ttp-body); font-size:.84rem; line-height:1.6; } .ttp-fact a, .ttp-inline{ color:var(--ttp-gold); text-decoration:none; } .ttp-fact a:hover, .ttp-inline:hover{ text-decoration:underline; } /* ---------- closing ---------- */ .ttp-final{ background:linear-gradient(135deg,rgba(212,175,55,.11),rgba(212,175,55,.03)); border:1px solid var(--ttp-gold-line); border-radius:20px; padding:34px; display:flex; flex-wrap:wrap; gap:24px; align-items:center; } .ttp-final-txt{ flex:1 1 330px; } .ttp-final h3{ margin-bottom:12px; } .ttp-final p{ color:#b8b8be; font-size:.94rem; line-height:1.68; margin:0 0 20px; } .ttp-final p b{ color:#e2e2e2; font-weight:600; } .ttp-next{ flex:0 1 270px; } .ttp-next p{ color:var(--ttp-body); font-size:.85rem; line-height:1.6; margin:0 0 12px; } .ttp-next a{ display:inline-flex; align-items:center; gap:8px; color:var(--ttp-gold) !important; text-decoration:none; font-family:Montserrat,sans-serif; font-weight:700; font-size:.74rem; letter-spacing:1.2px; text-transform:uppercase; border-bottom:1px solid var(--ttp-gold-line); padding-bottom:3px; } .ttp-next a:hover{ border-color:var(--ttp-gold); } .ttp-legal{ color:var(--ttp-mute); font-size:.76rem; line-height:1.7; margin:34px 0 0; } .ttp-legal b{ color:#8a8a90; font-weight:600; } @media (prefers-reduced-motion: reduce){ .ttp.ttp-js .ttp-rv{ opacity:1; transform:none; animation:none; } .ttp-cta{ transition:none; } } @media (max-width:860px){ .ttp-cmp-head, .ttp-cmp-row{ grid-template-columns:1fr 74px 84px; gap:8px; } .ttp-cmp-l{ font-size:.85rem; } } @media (max-width:760px){ .ttp{ padding:56px 0 60px; } .ttp-art{ order:-1; flex:1 1 100%; max-width:340px; margin:0 auto; } .ttp-final{ padding:24px 20px; } } /* ===== END GENERATED — SMART KEY PRODUCT PAGE (.ttp) ===== */ /* ========================================================================== PRODUCT PAGE — the compact top, the price, and the sticky buy bar ========================================================================== Scoped to .page-product throughout. PrestaShop puts that class on and also puts product-id-N and product- there, which is what makes a per-product rule possible without touching PHP: body.page-product every product body.product-id-27 one product, by id body.product-Tunitag.Smart.Key one product, by name This block is the SHOP-WIDE default. A product that needs its own treatment is a short block keyed on product-id-N, and it inherits everything here that it does not restate — the fallback and the override in one mechanism, with nothing to configure in a module and nothing that a theme update can revert. WHY THE TOP NEEDED WORKING ON AT ALL, in the numbers this was measured with — the live Smart Key page, at 1440x900 and at 390x844, before and after these rules: desktop 1440x900 phone 390x844 before after before after price top 504 522 1089 1094 Add to cart top 622 693 1207 1253 price font size 28 43 28 32 image column 50% 41% 100% 100% Two things are worth reading off that table rather than assuming. FIRST, the buy controls did NOT move up: the button sits 71px lower than it did, because the price is now 43px instead of 28px and that height has to go somewhere. Making the price the largest thing in the column and making the button reachable are different goals, and this block only does the first. On a desktop the button was already inside the first screen before any of this (622 of 900), so nothing there was broken. SECOND, on a phone the button is 1207px down a 844px screen — one and a half screens below a 390px-wide viewport's fold, and it gets 46px worse here. That is the actual problem, it is a phone problem, and CSS at the top of the page cannot solve it: any arrangement of a name, a price and a button still ends below the description when the description is eleven screens long. The bar at the bottom of this block solves it, and it is the reason the bar exists. What this block does do: the price becomes the largest thing in the buy column, the button spans the buy box instead of 9/12 of a row inside it, the image gives up six points of width to the column that sells, and the duplicated tax-excluded figure stops competing with the price it repeats. The quantity stepper is left where the theme puts it. It is real functionality (minimal_quantity, and it reprices over AJAX), and this product has exactly one thing to buy, so it is styled down rather than removed. ========================================================================== */ /* ---------- the top: a wider buy column, a tighter image ---------- */ @media (min-width: 768px) { .page-product .main-product-details .product-left { flex: 0 0 41%; max-width: 41%; } .page-product .main-product-details .product-right { flex: 0 0 59%; max-width: 59%; } } /* The page's own name, larger than the theme's heading default: it is the second thing read after the image and it is the product page's title. */ .page-product .product-right .page-heading { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; margin-bottom: 0.35rem; } /* The reference and stock line. The theme hides the reference in .js-product-attributes-source and repaints it into .product-attributes from its own script, so both containers are styled and neither is assumed. */ .page-product .product-attributes .attribute-item, .page-product .js-product-attributes-destination .attribute-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; font-size: 0.78rem; margin-bottom: 0.25rem; } .page-product .product-attributes .attribute-item label, .page-product .js-product-attributes-destination .attribute-item label { margin: 0; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8d95a3; } .page-product .product-attributes .attribute-item span, .page-product .js-product-attributes-destination .attribute-item span { color: #c9ced8; font-variant-numeric: tabular-nums; } /* ---------- the price: the largest thing in the column ---------- */ .page-product .product-prices { margin-top: 0.9rem; } .page-product .product-prices-wrapper { align-items: baseline; } .page-product .product-prices .price.product-price { font-family: Montserrat, Arial, sans-serif; font-size: clamp(2rem, 4.6vw, 2.7rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums; } .page-product .product-prices .price.product-price .current-price { color: inherit; } /* "(tax incl.)" belongs to the number, at the number's baseline — not floating after it at the same size, which is what makes it read as part of the price. */ .page-product .product-prices .tax-label-next-price { font-family: Inter, Arial, sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #8d95a3; margin-left: 0.45rem; vertical-align: 0.35em; } /* The theme prints the same figure twice, tax-excluded underneath. On a one-price, tax-included product that second line is noise competing with the number above it, so it is set as small print and pulled to its own line. */ .page-product .product-prices .show-more-without-taxes { display: block; font-size: 0.72rem; color: #7d858f; margin-top: 0.35rem; } .page-product .product-prices .show-more-without-taxes .tax-label-next-price { font-size: 0.62rem; margin-left: 0.3rem; } .page-product .product-prices .regular-price { font-size: 0.95rem; color: #8d95a3; margin-left: 0.5rem; } /* ---------- the buy row ---------- */ .page-product .product-add-to-cart-button .add { flex: 0 0 100%; max-width: 100%; } .page-product .product-add-to-cart .add-to-cart { width: 100%; min-height: 52px; font-family: Montserrat, Arial, sans-serif; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } /* The quantity stepper is real functionality, so it stays — but it is the least important control on the page and is set at that weight. */ .page-product .product-quantity-touchspin { margin-bottom: 0.6rem; } .page-product .product-quantity-touchspin > label { flex: 0 0 auto; max-width: none; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: #8d95a3; padding-right: 0.75rem; } .page-product .product-quantity-touchspin .qty { max-width: 96px; } /* The theme has a second add-to-cart layout ("inline": stepper and button on one line) selected from Product page settings in the Back Office. The live shop is on the default "normal" layout, which is what the rules above are measured against — but the setting is one checkbox away from changing the markup, and a button that quietly loses its sizing is not a failure anyone would trace back here. Both layouts are covered. */ .page-product .product-add-to-cart .inline-style { flex-wrap: wrap; gap: 0.6rem; } .page-product .product-add-to-cart .inline-style .add { flex: 1 1 200px; max-width: 100%; } .page-product .product-add-to-cart .inline-style .add-to-cart { width: 100%; min-height: 52px; } /* ---------- the sticky buy bar ---------- position:fixed, not sticky. The header is NOT pinned in this theme — measured on the live product page, #header computes to position:static at 1440 and at 390, and nothing else is fixed or sticky in the top band either. So there is no sticky ancestor for this to inherit from and no element to sit after; a sticky bar would need a sibling that the product layout does not provide. Fixed is the version that works on every page that includes this partial. --tt-hdr is the space at the top of the viewport that is ALREADY OCCUPIED, and is written by the script from the header's live bottom edge on every scroll frame. It is not a constant and it is not the header's height: it is 0 whenever the header has scrolled away, which is the usual case by the time the bar appears. The 0px fallback is for the no-JS case, where the bar never shows. */ .tt-buybar { position: fixed; top: var(--tt-hdr, 0px); left: 0; right: 0; z-index: 54; /* under the header's own sticky layer, over the page */ background: #141414; border-bottom: 1px solid #262c36; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Hidden means fully above the viewport, not merely above its own height. translateY(-100%) alone only works while the bar sits at top:0 — with a 345px sticky header measured at a narrow width, a -100% slide left the bar at y=164, on screen, visible only because the header happened to cover it. The offset is part of the distance, so the bar clears top:0 whatever the header measures. */ transform: translateY(calc(-100% - var(--tt-hdr, 0px))); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .tt-buybar.is-on { transform: none; } .tt-buybar-in { max-width: 1280px; margin: 0 auto; padding: 9px 15px; display: flex; align-items: center; gap: 14px; } .tt-buybar-thumb { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; overflow: hidden; background: #0a0a0a; display: block; } .tt-buybar-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .tt-buybar-who { flex: 1 1 auto; min-width: 0; } .tt-buybar-who b { display: block; font-size: 0.84rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-buybar-who span { display: block; font-size: 0.7rem; color: #8d95a3; margin-top: 2px; font-variant-numeric: tabular-nums; } .tt-buybar-price { flex: 0 0 auto; font-family: Montserrat, Arial, sans-serif; font-size: 1.16rem; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; } .tt-buybar-price del { display: block; font-size: 0.68rem; font-weight: 400; color: #8d95a3; text-align: right; } .tt-buybar-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: #d4af37; color: #111; font-family: Montserrat, Arial, sans-serif; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 0.22s; } .tt-buybar-btn:hover, .tt-buybar-btn:focus-visible { background: #e0bd45; } .tt-buybar-btn i { font-size: 0.8rem; } /* Below 768px the name and the reference are the first things to go: the price and the button are why the bar exists, and three lines of wrapping chrome on a 390px screen costs more than it carries. */ @media (max-width: 767px) { .tt-buybar-in { gap: 10px; padding: 8px 12px; } .tt-buybar-thumb { width: 36px; height: 36px; } .tt-buybar-who span { display: none; } .tt-buybar-who b { font-size: 0.8rem; } .tt-buybar-price { font-size: 1.05rem; } .tt-buybar-btn span { display: none; } .tt-buybar-btn { padding: 0 14px; } } @media (prefers-reduced-motion: reduce) { .tt-buybar { transition: none; } } /* ==== BEGIN GENERATED — PRODUCT PAGE FACTS (.tt-facts) ==== */ /* The three lines under the buy button. Generated by tools/build_product_facts.py - the numbers in the markup come from there. Colours are the same three the rest of this block already uses, so the lines read as part of the buy column rather than as a new element: #d4af37 gold for the tick, #c9c9c9 for the emphasised fragment, #8d95a3 for the sentence. Scoped to .page-product, not to the facts alone: the block ships shop-wide and this is the shop-wide default. A product that needs its own lines is a rule keyed on body.product-id-N, which inherits everything here it does not restate. There is no module setting for this and no Back Office field - see the SCOPE note in the builder. */ .page-product .tt-facts { margin-top: 18px; padding-top: 16px; border-top: 1px solid #262c36; display: flex; flex-direction: column; gap: 9px; } .page-product .tt-fact { display: flex; gap: 9px; align-items: flex-start; } /* The tick is aligned to the first line of text rather than to the box, so it sits on the cap height at every font size and every wrapping. */ .page-product .tt-fact > i { flex: none; margin-top: 4px; font-size: 11px; line-height: 1; color: #d4af37; } .page-product .tt-fact > span { font-size: 0.8rem; line-height: 1.55; color: #8d95a3; } .page-product .tt-fact > span b { color: #c9c9c9; font-weight: 600; } /* ==== END GENERATED — PRODUCT PAGE FACTS (.tt-facts) ==== */