/* ============================================================================= TikTok Channel Partner — landing page variant B (page 1550). Loaded by the [us_html] element in the first row of that page. Holds only what the WPBakery css= whitelist cannot express: the webfont, the page canvas, the chromatic-aberration wordmark, the list bullets, the venue caption overlay and the Gravity Forms skin. Everything else lives in the elements' own Design settings and stays editable in the builder. ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap'); /* ---------- page canvas ---------- */ body.page-id-1550{background:#000;color:#fff;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;scroll-behavior:smooth;overflow-x:hidden} body.page-id-1550 .l-canvas,body.page-id-1550 .l-main,body.page-id-1550 .l-content{background:transparent} /* The full-width rows carry the theme's negative column margins, which push a couple of dozen pixels past the viewport and give the page a horizontal scrollbar. Clip per section rather than on : overflow on an ancestor would break the sticky header. */ body.page-id-1550 .l-section{overflow-x:clip} /* ---------- layout grids ---------- Impreza's grid column layout is off site-wide (Theme Options > live_builder / grid_columns_layout), so rows fall back to the legacy flex layout: the row's columns_gap attribute is ignored and the gutter is padding on .vc_column-inner. That cannot express the design's gaps or its fixed-width columns, so these rows are re-laid-out as CSS grid. Column widths in the builder still describe the intent; these rules set what actually renders. */ body.page-id-1550 .tikcp-grid{display:grid; /* the theme pulls .g-cols 24px past the content container on both sides to make room for its own gutters; the grid gap replaces that, and the rule that sets it outranks anything reachable from here */ margin-left:0 !important;margin-right:0 !important} body.page-id-1550 .tikcp-grid>.wpb_column{width:auto;max-width:none;flex:none; min-width:0;padding:0; /* .g-cols.stacking_default.via_flex>div:not([class*="vc_col-xs"]) gives every stacked column a 1.5rem bottom margin at four classes deep — that is the black band that opened up between the two rows of the facts strip, and it outranks anything reachable from a page-scoped selector */ margin:0 !important} body.page-id-1550 .tikcp-grid>.wpb_column>.vc_column-inner{height:100%} /* rows whose columns carry no padding of their own still get the theme's 24px gutter on .vc_column-inner — the grid gap replaces it */ body.page-id-1550 .tikcp-flush>.wpb_column>.vc_column-inner{padding-left:0;padding-right:0} /* The full-bleed rows (facts strip, image band) zero the column padding that normally compensates for the outer row's -24px gutters, so without this the strip starts 24px off-screen and its first cell is clipped. */ body.page-id-1550 .l-section.width_full>.l-section-h>.g-cols{ margin-left:0 !important;margin-right:0 !important} body.page-id-1550 .tikcp-facts{grid-template-columns:repeat(4,1fr);gap:0} body.page-id-1550 .tikcp-cards{grid-template-columns:repeat(3,1fr);gap:18px} body.page-id-1550 .tikcp-gallery{grid-template-columns:repeat(2,1fr);gap:18px} body.page-id-1550 .tikcp-slot{grid-template-columns:130px 1fr;gap:26px;align-items:start} body.page-id-1550 .tikcp-videorow{grid-template-columns:320px 1fr;gap:36px;align-items:center} body.page-id-1550 .tikcp-pboxes{grid-template-columns:repeat(2,1fr);gap:18px} /* 768px, not 900, so the two-column switch lands on the same breakpoint as the per-cell borders above (Impreza's "mobiles" state) */ @media(max-width:768px){ body.page-id-1550 .tikcp-facts{grid-template-columns:repeat(2,1fr)} } @media(max-width:900px){ body.page-id-1550 .tikcp-cards, body.page-id-1550 .tikcp-gallery, body.page-id-1550 .tikcp-pboxes, body.page-id-1550 .tikcp-videorow{grid-template-columns:1fr} body.page-id-1550 .tikcp-videorow{grid-template-columns:1fr} body.page-id-1550 .tikcp-slot{grid-template-columns:84px 1fr;gap:16px} body.page-id-1550 .tikcp-videorow .w-video{max-width:330px} } /* facts strip — the reference keeps two columns down to the smallest screen. The cell padding and the dividers are set per cell in each column's own Design settings rather than here: Impreza emits every css= declaration with !important, so a rule in this file would lose to it. */ /* One thing the Design settings cannot supply: Impreza derives border--style only for sides that carry a width in the same breakpoint block, so the bottom rule the cells gain at the mobile breakpoint has a width but no style and renders as nothing. Nothing else sets this property, so a plain rule is enough. */ body.page-id-1550 .tikcp-facts>.wpb_column>.vc_column-inner{ border-bottom-style:solid; /* a style with no width falls back to `medium` (3px), so the base width has to be pinned here; the mobile breakpoint raises it to 1px from css= */ border-bottom-width:0} body.page-id-1550 h1,body.page-id-1550 h2,body.page-id-1550 h3,body.page-id-1550 h4,body.page-id-1550 p,body.page-id-1550 li,body.page-id-1550 .w-text,body.page-id-1550 .w-btn{font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif} body.page-id-1550 #venue,body.page-id-1550 #programme,body.page-id-1550 #register,body.page-id-1550 #practical{scroll-margin-top:110px} /* ---------- the TikTok logo, set inline in the headline ---------- The official wordmark already carries the cyan/red chromatic offset, so it replaces the hand-built glitch the headline used as a stand-in. The word stays in the markup and is pushed out of view, so the heading still reads "Belgium's first TikTok Channel Sales Partner" to a screen reader. Sized in em so it scales with the heading at every breakpoint; the ratio is the SVG's own 841.34 x 204.44. */ body.page-id-1550 .tikcp-h1-logo{ display:inline-block;vertical-align:baseline; /* sized so the wordmark's cap height (141.8 of the SVG's 204.44 units) matches Inter's own cap height, and nudged down so the logo's baseline (at 195.9) lands on the text baseline rather than the box edge */ height:1.049em;width:4.317em;margin-bottom:-0.044em; background:url(/wp-content/uploads/2026/08/Logo-TikTok-wit.svg) no-repeat left center; background-size:contain; text-indent:-9999px;overflow:hidden;white-space:nowrap} /* On phones the full-size mark (164px) does not leave room for "Channel" beside it, so the heading breaks over four lines. Measured at a 390px viewport the heading has 310px and " Channel" takes 157px, so the mark has to stay under ~153px, and under ~138px for a 375px screen. This is 136px, which holds three lines down to 375px; below that it falls back to four. */ @media(max-width:768px){ body.page-id-1550 .tikcp-h1-logo{ height:0.870em;width:3.58em;margin-bottom:-0.036em} } body.page-id-1550 .tikcp-accent{color:#FE2C55} /* ---------- buttons ---------- Impreza paints the theme button style's border AND its hover fill on a ::before layer, on top of whatever the element's own css= sets — that is the blue outline on the red button and the white line on the form's submit. The design defines every button state itself, so the layer goes entirely. */ body.page-id-1550 .w-btn::before, body.page-id-1550 .button::before, body.page-id-1550 .gform_button::before, body.page-id-1550 input[type=submit]::before{display:none !important} /* ---------- hover states, ported from the reference design ---------- The theme's button styles swap background and text colour on hover (style 1 fades to a white background while the label stays white), which is unreadable here. Each rule below mirrors the matching :hover in tiktok-cp/style.css. The !important is against the theme's own :hover, which sits at a specificity this file cannot reach from a page-scoped selector. */ /* primary — red, lifts with a red glow */ body.page-id-1550 .tikcp-btn.w-btn, body.page-id-1550 .tikcp-btn.w-btn:hover, body.page-id-1550 .tikcp-btn.w-btn:focus, body.page-id-1550 .tikcp-btn.w-btn:active{ background-color:#FE2C55 !important;color:#fff !important;border-color:transparent !important} body.page-id-1550 .tikcp-btn.w-btn .w-btn-label{color:inherit} body.page-id-1550 .tikcp-btn.w-btn{transition:transform .12s ease,box-shadow .2s ease} body.page-id-1550 .tikcp-btn.w-btn:hover{ transform:translateY(-2px);box-shadow:0 10px 34px rgba(254,44,85,.42) !important} /* ghost — transparent, border goes solid white */ body.page-id-1550 .tikcp-btn-ghost.w-btn, body.page-id-1550 .tikcp-btn-ghost.w-btn:hover, body.page-id-1550 .tikcp-btn-ghost.w-btn:focus, body.page-id-1550 .tikcp-btn-ghost.w-btn:active{ background-color:rgba(0,0,0,0) !important;color:#fff !important} body.page-id-1550 .tikcp-btn-ghost.w-btn .w-btn-label{color:inherit} body.page-id-1550 .tikcp-btn-ghost.w-btn{transition:border-color .2s ease} body.page-id-1550 .tikcp-btn-ghost.w-btn:hover{ border-color:#fff !important;box-shadow:none !important;transform:none} /* mini — cyan border and a faint cyan fill */ body.page-id-1550 .tikcp-btn-mini.w-btn, body.page-id-1550 .tikcp-btn-mini.w-btn:focus, body.page-id-1550 .tikcp-btn-mini.w-btn:active{ background-color:rgba(0,0,0,0) !important;color:#fff !important} body.page-id-1550 .tikcp-btn-mini.w-btn .w-btn-label{color:inherit} body.page-id-1550 .tikcp-btn-mini.w-btn{transition:border-color .15s ease,background-color .15s ease} body.page-id-1550 .tikcp-btn-mini.w-btn:hover{ border-color:#25F4EE !important;background-color:rgba(37,244,238,.09) !important; color:#fff !important;transform:none;box-shadow:none !important} /* logos fade */ body.page-id-1550 .tikcp-logo{transition:opacity .15s ease} body.page-id-1550 .tikcp-logo:hover{opacity:.72} /* ---------- header on narrow screens ---------- The three logos have to stay on one line at every width, so the bar never wraps and the marks shrink together. The CTA drops out of the bar and hangs underneath it as a compact tag, which keeps the sticky header to two tight rows instead of eating a third of a phone screen. */ body.page-id-1550 .tikcp-logobar{flex-wrap:nowrap;min-width:0} body.page-id-1550 .tikcp-logobar>*{flex:0 0 auto} @media(max-width:900px){ body.page-id-1550 .tikcp-logobar{gap:.7rem} } @media(max-width:620px){ body.page-id-1550 .tikcp-logobar{gap:.5rem;justify-content:flex-start} } @media(max-width:380px){ body.page-id-1550 .tikcp-logobar{gap:.35rem} /* the eyebrow measures 283px at the mobiles size — one notch smaller keeps it on a single line down to a 320px screen */ body.page-id-1550 .tikcp-eyebrow{ font-size:8.5px;letter-spacing:.5px;padding-left:10px;padding-right:10px} } /* venue photos zoom inside their rounded frame */ body.page-id-1550 .tikcp-venue img{transition:transform .5s ease;filter:saturate(1.05)} body.page-id-1550 .tikcp-venue:hover img{transform:scale(1.04)} /* the one plain text link */ body.page-id-1550 .tikcp-vlink a{text-decoration:none;transition:none} body.page-id-1550 .tikcp-vlink a:hover{text-decoration:underline;color:#25F4EE} body.page-id-1550 .tikcp-dot{color:#25F4EE;text-shadow:0 0 12px #25F4EE} /* ---------- practical info lists ---------- */ body.page-id-1550 .tikcp-list ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} body.page-id-1550 .tikcp-list li{font-size:14.5px;color:#b3b3b9;line-height:1.5} body.page-id-1550 .tikcp-list li::before{content:"\00B7";color:#FE2C55;margin-right:9px;font-weight:700} body.page-id-1550 .tikcp-list strong{color:#fff;font-weight:600} body.page-id-1550 .tikcp-footnote a{color:#8a8a8f;text-decoration:underline} /* ---------- venue captions overlaid on the image ---------- */ body.page-id-1550 .w-image.tikcp-venue>.w-image-h>.w-image-meta{ position:absolute;left:0;right:0;bottom:0;margin:0; padding:44px 22px 18px;font-size:14px;font-weight:600;letter-spacing:.2px;color:#fff; background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 72%)} body.page-id-1550 .w-image.tikcp-venue>.w-image-h>.w-image-meta .w-image-title{ font-size:14px;font-weight:600;color:#fff;margin:0} body.page-id-1550 .tikcp-venue, body.page-id-1550 .tikcp-venue .w-image-h{position:relative;overflow:hidden;border-radius:16px} body.page-id-1550 .tikcp-venue .w-image-h{display:block} /* ---------- Gravity Forms inside the red band ---------- */ body.page-id-1550 #gform_wrapper_13{margin-top:34px} body.page-id-1550 #gform_wrapper_13 .gform_heading{display:none} body.page-id-1550 #gform_wrapper_13.gravity-theme .gform_fields{grid-row-gap:18px;grid-column-gap:18px} body.page-id-1550 #gform_wrapper_13.gravity-theme .gfield_label{color:#fff;font-size:13px;font-weight:700; letter-spacing:.2px;margin-bottom:8px;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif} body.page-id-1550 #gform_wrapper_13.gravity-theme .gfield_required{color:rgba(255,255,255,.75)} body.page-id-1550 #gform_wrapper_13.gravity-theme .gfield_description{color:rgba(255,255,255,.8);font-size:13px;padding-top:8px} body.page-id-1550 #gform_wrapper_13.gravity-theme input[type=text], body.page-id-1550 #gform_wrapper_13.gravity-theme input[type=email], body.page-id-1550 #gform_wrapper_13.gravity-theme textarea{width:100%;background:#fff;border:1px solid transparent; border-radius:9px;padding:15px 16px;color:#111114;font-size:15.5px;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; line-height:1.4;height:auto;min-height:0; transition:box-shadow .15s} body.page-id-1550 #gform_wrapper_13.gravity-theme textarea{height:96px;min-height:96px;line-height:1.5;resize:vertical} body.page-id-1550 #gform_wrapper_13.gravity-theme input::placeholder, body.page-id-1550 #gform_wrapper_13.gravity-theme textarea::placeholder{color:#9b9ba3} body.page-id-1550 #gform_wrapper_13.gravity-theme input:focus, body.page-id-1550 #gform_wrapper_13.gravity-theme textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.28)} body.page-id-1550 #gform_wrapper_13.gravity-theme .gfield--type-consent{background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.4);border-radius:12px;padding:18px 20px;margin-top:8px} body.page-id-1550 #gform_wrapper_13.gravity-theme .gfield--type-consent .gfield_label{display:none} body.page-id-1550 #gform_wrapper_13.gravity-theme .ginput_container_consent{display:flex;gap:13px;align-items:flex-start} body.page-id-1550 #gform_wrapper_13.gravity-theme .ginput_container_consent input[type=checkbox]{ -webkit-appearance:checkbox;appearance:checkbox; width:19px;height:19px;min-height:0;padding:0;border:0;border-radius:0;background:none; accent-color:#000;margin:2px 0 0;flex:none;cursor:pointer} body.page-id-1550 #gform_wrapper_13.gravity-theme .ginput_container_consent label{font-size:13.5px;font-weight:400; color:rgba(255,255,255,.92);line-height:1.5;margin:0;cursor:pointer;letter-spacing:0} body.page-id-1550 #gform_wrapper_13.gravity-theme .ginput_container_consent label a{color:#fff;text-decoration:underline} body.page-id-1550 #gform_wrapper_13.gravity-theme .gform_footer{padding:0;margin:28px 0 0} /* GF 3.x renders the submit as