/* ============================================================================ GoTroppo — "NBN For You" content skin ---------------------------------------------------------------------------- Loaded only on the use-case landing pages (see gotroppo_is_usecase()). This file does NOT style theme markup. It restyles the CUSTOMER'S OWN page content — Kadence Blocks wrappers plus the go-troppo plugin's components — so those pages adopt the dark GoTroppo design without a single content edit. Every selector below was read off the live gotroppo.com.au DOM, not guessed. The class map is in the handover as NBN-FOR-YOU-CLASS-MAP.md. ON !important Kadence Blocks writes per-block INLINE styles (colours, backgrounds, padding) chosen against the old light design. Inline declarations outrank normal author rules, so the only way a stylesheet can reclaim those blocks is author !important, which does outrank inline. It is used deliberately and only where an inline style has to be beaten — never for ordinary specificity fights. CONTENTS 1 Chrome the template owns 2 Layout: neutralise Kadence wrappers, establish lanes 3 Typography inside content 4 Address checker (.nbn-address-search) 5 Value / trust strips 6 Plan cards (.nbn-plan-card) 7 Speed matrix (.gt-speed-table) 8 Callouts, notes, footnotes 9 Feature grids and tick lists 10 FAQ accordion (Kadence) 11 Rewards CTA 12 Sibling rail and hub 13 Responsive ========================================================================= */ /* ============================================================ 1. Chrome the template owns ============================================================ */ /* The breadcrumb bar was removed from the template — these pages open straight on their hero. .uc-kicker is kept: the rail and the hub both use it. */ .uc-kicker{font-size:11px;font-weight:900;letter-spacing:.15em;text-transform:uppercase; color:var(--orange);margin:10px 0 0} /* Matches the top padding of a content hero row (clamp(40px,5.2vw,68px)) so a page with no heading of its own opens on the same rhythm as one that has one. Before the breadcrumb bar was removed there was a strip above this to carry that space. */ .uc-fallback-hero{background:var(--ink);padding-block:clamp(40px,5.2vw,68px) clamp(30px,3.2vw,44px); border-bottom:1px solid var(--line)} .uc-fallback-hero h1{font-size:clamp(34px,5vw,60px);max-width:18ch;margin:0} /* ============================================================ 2. Layout — neutralise the Kadence wrappers, establish lanes ------------------------------------------------------------ The content arrives as a stack of Kadence rows. Each row becomes a full-bleed band on the page background; the column wrapper inside it becomes the measured content lane. Doing it this way means the page looks identical whether or not Kadence Blocks' own layout CSS is present, which is what makes the reskin predictable on an install this theme has never seen. ============================================================ */ .uc-body{background:var(--bg);color:rgba(255,255,255,.84);overflow-x:hidden} /* Strip the old light design's per-block backgrounds, borders and padding. */ .uc-body .kb-row-layout-wrap, .uc-body .kt-row-column-wrap, .uc-body .wp-block-kadence-column, .uc-body .kt-inside-inner-col, .uc-body .kt-row-layout-overlay{ background:none !important; background-color:transparent !important; border:0 !important; box-shadow:none !important; min-height:0 !important; } /* The gradient overlay Kadence paints over hero rows is pure old-design decoration. */ .uc-body .kt-row-layout-overlay{display:none !important} /* Vertical rhythm is the theme's, not the page builder's. */ .uc-body .kb-row-layout-wrap{padding:clamp(40px,5.2vw,68px) 0 !important;margin:0 !important} .uc-body .kb-row-layout-wrap + .kb-row-layout-wrap{border-top:1px solid rgba(255,255,255,.07)} /* The content lane. */ .uc-body .kt-row-column-wrap{ max-width:var(--wrap);margin-inline:auto !important; padding-inline:clamp(20px,5vw,56px) !important; display:grid;gap:clamp(22px,3vw,44px);align-items:start; } .uc-body .kt-has-2-columns{grid-template-columns:1fr 1fr} .uc-body .kt-has-3-columns{grid-template-columns:repeat(3,1fr)} .uc-body .kt-has-4-columns{grid-template-columns:repeat(4,1fr)} .uc-body .kt-inside-inner-col{padding:0 !important;min-width:0} /* Prose lane — long-form paragraphs get a readable measure, everything structural (tables, grids, cards) keeps the full lane. */ .uc-body .kt-has-1-columns .kt-inside-inner-col > p, .uc-body .kt-has-1-columns .kt-inside-inner-col > .wp-block-kadence-advancedheading{ max-width:74ch; } /* Plugin wrappers should never introduce a second gutter. */ .uc-body .nbn-plugin-wrapper, .uc-body .nbn-address-search-container, .uc-body .nbn-plans-container{max-width:100%;padding-inline:0} /* ============================================================ 3. Typography inside the content ============================================================ */ .uc-body h1,.uc-body h2,.uc-body h3,.uc-body h4{color:var(--off);letter-spacing:-.03em;line-height:1.06} .uc-body h1{font-size:clamp(38px,5.6vw,72px);margin:0 0 16px} .uc-body h2{font-size:clamp(28px,4vw,46px);margin:0 0 14px} .uc-body h3{font-size:clamp(20px,2.4vw,27px);margin:0 0 10px;line-height:1.15} .uc-body h4{font-size:17px;margin:0 0 8px;line-height:1.25} .uc-body p{font-size:16px;line-height:1.62;margin:0 0 16px;color:rgba(255,255,255,.78)} .uc-body strong,.uc-body b{color:var(--off);font-weight:800} .uc-body a{color:var(--orange);text-decoration:underline;text-underline-offset:3px} .uc-body a:hover{color:var(--off)} /* Kadence advanced headings carry inline colours from the light design. */ .uc-body .wp-block-kadence-advancedheading, .uc-body .wp-block-kadence-advancedheading *{color:inherit !important;background:none !important} .uc-body .wp-block-kadence-advancedheading{color:var(--off) !important} /* The section titles wrap their accent word in a bare . */ .uc-body .gt-section-title{font-size:clamp(28px,4vw,46px);margin:0} .uc-body .gt-section-title span, .uc-body .nbn-search-heading .highlight{color:var(--orange)} .uc-body .gt-section-subtitle{color:var(--muted);font-size:16px;margin:12px 0 30px} /* Buttons anywhere in the content adopt the theme button. */ .uc-body .troppo-btn, .uc-body .nbn-button, .uc-body .nbn-select-plan, .uc-body .nbn-search-button, .uc-body .nbn-select-address-button{ display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--grad);color:var(--ink) !important;border:0;border-radius:99px; font-family:inherit;font-weight:800;font-size:14px;padding:14px 26px; text-decoration:none !important;cursor:pointer;line-height:1.2; } .uc-body .troppo-btn:hover, .uc-body .nbn-button:hover, .uc-body .nbn-select-plan:hover, .uc-body .nbn-search-button:hover{filter:brightness(1.06)} /* ============================================================ 4. Address checker (.nbn-address-search) ------------------------------------------------------------ Behaviour, markup and states stay the plugin's. Everything below is paint and box metrics, brought into line with the theme's own address form. The plugin's defaults were built for the old light design and are far too large here — measured before this pass: a 980px-tall card, 48px of wrapper padding nested inside the card's own 46px, step bubbles at 319x92 each because .nbn-step carries flex:1 1 0, and a 118px-tall submit button. Each rule below that carries weight is correcting one of those. ============================================================ */ .uc-body .nbn-address-search{background:transparent} body .uc-body .nbn-search-main-card{ background:linear-gradient(180deg,#16142a 0%,#0e0d1b 100%) !important; border:1px solid var(--line) !important;border-radius:22px !important; padding:clamp(28px,3vw,44px) !important;max-width:none !important; position:relative;overflow:hidden; } /* The wrapper's 48px sat inside the card's own padding, doubling every gutter. */ body .uc-body .nbn-search-wrapper{padding:0 !important;max-width:none !important} /* Old-design decoration: reads as smudges on a dark card. */ .uc-body .nbn-geometric-bg, .uc-body .nbn-float-shape, .uc-body .nbn-parrot-illustration{display:none !important} body .uc-body .nbn-search-heading{ font-size:clamp(26px,3.2vw,40px) !important;line-height:1.06 !important; letter-spacing:-.03em;margin:0 0 12px !important;color:var(--off) !important} body .uc-body .nbn-search-subtitle{ color:var(--muted) !important;font-size:15px !important;margin:0 0 26px !important} /* ---- Progress steps ---- The plugin gives each step flex:1 1 0 and stacks the label under the circle, which turns three short words into three 319x92 slabs. They are a position indicator, not a control: compact pills on one row. */ body .uc-body .nbn-progress-steps{ display:flex !important;flex-wrap:wrap;gap:10px !important; margin:0 0 24px !important;padding:0 !important;list-style:none} body .uc-body .nbn-step{ flex:0 0 auto !important;width:auto !important;min-width:0 !important; flex-direction:row !important;align-items:center !important; display:inline-flex !important;gap:9px !important; background:rgba(255,255,255,.05) !important;border:1px solid var(--line) !important; border-radius:99px !important;padding:8px 16px 8px 8px !important; font-size:12.5px !important;font-weight:700;color:var(--muted) !important; height:auto !important;min-height:0 !important;box-shadow:none !important} body .uc-body .nbn-step::before, body .uc-body .nbn-step::after{display:none !important} /* connector lines */ body .uc-body .nbn-step-circle{ width:24px !important;height:24px !important;min-width:0 !important; border-radius:99px !important;flex:0 0 auto !important; background:rgba(255,255,255,.12) !important;color:var(--off) !important; display:flex !important;align-items:center;justify-content:center; font-size:11.5px !important;font-weight:900;margin:0 !important} body .uc-body .nbn-step-label{ margin:0 !important;font-size:12.5px !important;font-weight:700; white-space:nowrap;color:inherit !important} body .uc-body .nbn-step.active{ border-color:var(--orange) !important;color:var(--off) !important; background:rgba(255,98,0,.1) !important} body .uc-body .nbn-step.active .nbn-step-circle{ background:var(--orange) !important;color:var(--ink) !important} /* ---- The form ---- */ body .uc-body .nbn-search-form{ display:flex !important;gap:10px !important;flex-wrap:wrap; align-items:center !important;max-width:660px} body .uc-body .nbn-input-group{ flex:1 1 280px !important;min-width:0;position:relative;margin:0 !important} body .uc-body .nbn-address-input{ width:100% !important;height:54px !important; border:0 !important;border-radius:99px !important; padding:0 24px !important;font-family:inherit;font-size:15px !important;font-weight:600; background:rgba(255,255,255,.1) !important;color:var(--off) !important; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22) !important;margin:0 !important} body .uc-body .nbn-address-input::placeholder{color:rgba(255,255,255,.5)} body .uc-body .nbn-address-input:focus{outline:2px solid var(--orange);outline-offset:2px} body .uc-body .nbn-search-button-wrapper{flex:0 0 auto !important;margin:0 !important} body .uc-body .nbn-search-button{ height:54px !important;min-height:0 !important; padding:0 30px !important;font-size:14.5px !important;white-space:nowrap; border-radius:99px !important;box-shadow:none !important; background:var(--grad) !important;color:var(--ink) !important;border:0 !important; display:inline-flex !important;align-items:center;justify-content:center;gap:8px} body .uc-body .nbn-search-button:hover{filter:brightness(1.06)} .uc-body .nbn-search-helper-text{color:var(--muted);font-size:12.5px;margin-top:14px;font-style:normal} /* ---- Results and states ---- */ .uc-body .nbn-search-feedback{border-radius:12px;padding:13px 17px;font-size:13.5px;font-weight:600;margin-top:14px} .uc-body .nbn-search-error{background:rgba(255,90,90,.12);border:1px solid rgba(255,120,120,.4);color:#ffc9c9} body .uc-body .nbn-qualification-success{ /* no display here: the plugin controls visibility via an inline style — section 17 */ align-items:center;gap:9px; background:var(--teal) !important;color:var(--ink) !important; font-weight:800;font-size:13px;padding:10px 18px !important; border-radius:99px !important;margin-top:20px} .uc-body .nbn-success-icon{display:inline-flex;width:16px;height:16px} .uc-body .nbn-addresses-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px} .uc-body .nbn-addresses-list li{background:rgba(255,255,255,.05);border:1px solid var(--line); border-radius:11px;padding:12px 16px;font-size:14px} /* ---- Corrections found by measuring the rendered card ---- .nbn-search-heading is a WRAPPER div holding

and the subtitle, not a heading element — so the page-level h1 rule was sizing it at 72px and the card ran to 769px tall for one address field. */ body .uc-body .nbn-search-heading{margin:0 0 22px !important} body .uc-body .nbn-search-heading h1{ font-size:clamp(26px,3.2vw,40px) !important;line-height:1.06 !important; letter-spacing:-.03em !important;margin:0 0 14px !important;color:var(--off) !important} body .uc-body .nbn-search-heading .nbn-search-subtitle{margin:0 !important;padding:0 !important} /* address-search-wildly.css paints the accent word as gradient-clipped text (-webkit-text-fill-color:transparent + background-clip:text). Removing the old-design gradient therefore made "More rewards." invisible rather than orange — the fill has to be handed back to the colour. */ body .uc-body .highlight, body .uc-body .nbn-search-heading h1 .highlight, body .uc-body mark{ -webkit-text-fill-color:currentColor !important; -webkit-background-clip:border-box !important;background-clip:border-box !important; color:var(--orange) !important} /* The plugin centres the steps and the helper line while the heading above them is left-aligned, so the card read as two different layouts stacked. */ body .uc-body .nbn-progress-steps{justify-content:flex-start !important} body .uc-body .nbn-search-helper-text{text-align:left !important;margin:14px 0 0 !important} body .uc-body .nbn-search-form{margin:0 !important} /* The connector rule is .nbn-progress-steps::before — a 540x2px absolutely positioned line sized for the old full-width steps. With compact pills it just trails off to the right of the last one. */ body .uc-body .nbn-progress-steps::before, body .uc-body .nbn-progress-steps::after{display:none !important;content:none !important} /* The pills measured 60px tall from the plugin's own min-height; a status indicator does not need to be as tall as the input below it. */ body .uc-body .nbn-step{height:42px !important;padding:0 16px 0 8px !important} /* ============================================================ 5. Value / trust strips ------------------------------------------------------------ Two variants exist: .gt-valuestrip on the page and .nbn-trust-value-stack inside the checker. Both become the theme's trust row — a tick and a line of text, not a boxed card. ============================================================ */ .uc-body .gt-valuestrip{background:transparent !important;padding-block:0;width:auto} .uc-body .gt-valuestrip__row{display:flex;flex-wrap:wrap;gap:16px 38px;justify-content:flex-start; max-width:none;margin:0} .uc-body .gt-vs-item{display:inline-flex;align-items:center;gap:11px; color:rgba(255,255,255,.82);font-weight:700;font-size:14px} .uc-body .gt-vs-ic{width:34px;height:34px;flex:0 0 34px;position:relative} .uc-body .gt-vs-ic::after{display:block;content:"";position:absolute;inset:0;border-radius:10px; background:var(--orange);transform:translate(3px,3px);z-index:0} .uc-body .gt-vs-ic__f{position:relative;z-index:1;width:34px;height:34px;border-radius:10px; background:#ffde59;border:0;display:flex;align-items:center;justify-content:center} .uc-body .gt-vs-ic__f svg{width:20px;height:20px;color:#100f1d} body .uc-body .nbn-trust-value-stack{ display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px 32px !important;margin-top:28px !important;padding:0 !important;list-style:none} body .uc-body .nbn-value-item{ display:flex !important;align-items:flex-start !important;gap:11px !important; background:transparent !important;border:0 !important;padding:0 !important; border-radius:0 !important;box-shadow:none !important} .uc-body .nbn-value-icon{flex:0 0 auto;color:var(--teal);display:inline-flex;width:18px;height:18px;margin-top:2px} .uc-body .nbn-value-content{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.72)} .uc-body .nbn-value-content strong{display:block;color:var(--off);font-size:14px;margin-bottom:2px} /* ============================================================ 6. Plan cards (.nbn-plan-card) — reskinned to the theme's card ------------------------------------------------------------ These are the plugin's cards and they stay the plugin's: its LAYOUT engine is untouched. plan-cards-v9.css handles the responsive card widths itself (4-up above 1200px, 3-up to 1199, 2-up to 991, snap carousel below 640) and an earlier attempt to override that collapsed the cards to 12px slivers. None of the rules below touch flex, width or the grid. What they do change is the card's SURFACE, so it matches gotroppo_plan_card() exactly: white card on the off-white band, orange speed dials with DOWN / UP labels, the big ink price, orange-dotted feature list, full-width gradient button, corner flag. Same design, their markup. The band is off-white to match the homepage plans section — this is the one light zone on the page. ============================================================ */ body .uc-body .nbn-plans-display, body .uc-body .nbn-plugin-wrapper.nbn-plans-display, body .uc-body .nbn-plans-container, body .uc-body .troppo-theme-container{ background:var(--off) !important;color:var(--ink) !important; width:auto !important;max-width:none !important; margin-left:0 !important;margin-right:0 !important} .uc-body .nbn-plans-display h1,.uc-body .nbn-plans-display h2, .uc-body .nbn-plans-display h3,.uc-body .nbn-plans-display p{color:var(--ink)} /* ---- SELECTOR WEIGHT ---- Every rule for a card internal is prefixed `html body .uc-body .nbn-plan-card` = (0,3,2). That is not decoration. The plugin's own rules for these elements are `body .nbn-plugin-wrapper .nbn-plan-card .X` = (0,3,1) with !important on every declaration; an earlier pass here used `body .uc-body .X` = (0,2,1), also !important, and lost every single one — plan names rendered white on the white card. Equal importance means specificity decides, so the prefix has to reach (0,3,1) at minimum. (0,3,2) clears it and still ties-then-wins on source order against the `.nbn-flow` chains used on the order page. Verified by reading back computed values with the real plugin CSS loaded, not by inspection. See CLAUDE.md, "Verifying the skin still wins". NOTE: none of these touch flex, width, or the grid. The plugin keeps owning the responsive card layout. */ html body .uc-body .nbn-plan-card{ background:#fff !important;border:1px solid rgba(0,0,0,.09) !important; border-radius:20px !important;padding:32px 26px 28px !important; color:var(--ink) !important;box-shadow:none !important;overflow:visible !important} html body .uc-body .nbn-plan-card.featured, html body .uc-body .nbn-plan-card.nbn-plan-popular, html body .uc-body .nbn-plan-card.popular, html body .uc-body .nbn-plan-card.is-popular{ background:#fff !important;box-shadow:0 0 0 2.5px var(--orange) !important;border-color:transparent !important} /* The plugin wraps the body in a second bordered box, which reads as a card inside a card once the outer one is painted white. */ html body .uc-body .nbn-plan-card .nbn-plan-details, html body .uc-body .nbn-plan-card .nbn-plan-header, html body .uc-body .nbn-plan-card .nbn-header-top, html body .uc-body .nbn-plan-card .nbn-best-for, html body .uc-body .nbn-plan-card .nbn-plan-features, html body .uc-body .nbn-plan-card .nbn-plan-actions, html body .uc-body .nbn-plan-card .nbn-features-content{ background:transparent !important;border:0 !important;border-radius:0 !important; padding:0 !important;box-shadow:none !important;min-height:0 !important; text-align:left !important} html body .uc-body .nbn-plan-card .nbn-plan-details{display:flex !important;flex-direction:column !important;flex:1 1 auto !important} html body .uc-body .nbn-plan-card .nbn-plan-name{ font-size:23px !important;font-weight:900 !important;letter-spacing:-.03em !important; line-height:1.1 !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; margin:0 !important;text-align:left !important;background:none !important} html body .uc-body .nbn-plan-card .nbn-plan-tier{ font-size:11.5px !important;color:#6a6f7e !important;-webkit-text-fill-color:#6a6f7e !important; font-weight:700 !important;letter-spacing:.04em !important;margin:5px 0 0 !important; text-align:left !important;background:transparent !important;padding:0 !important;border:0 !important} html body .uc-body .nbn-plan-card .nbn-speed-tier{display:none !important} /* ---- Speed dials ---- */ html body .uc-body .nbn-plan-card .nbn-header-bottom{ margin:24px 0 !important;padding:20px 0 !important;background:transparent !important; border-top:1px solid rgba(0,0,0,.09) !important; border-bottom:1px solid rgba(0,0,0,.09) !important; border-left:0 !important;border-right:0 !important;border-radius:0 !important} html body .uc-body .nbn-plan-card .nbn-typical-speeds-text{ font-size:10.5px !important;font-weight:800 !important;letter-spacing:.09em !important; text-transform:uppercase !important;color:#6a6f7e !important;-webkit-text-fill-color:#6a6f7e !important; margin:0 0 14px !important;text-align:left !important} html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators{ display:grid !important;grid-template-columns:auto auto 1fr !important; align-items:center !important;gap:14px 10px !important; white-space:normal !important;flex-wrap:wrap !important;line-height:1 !important} html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators br{display:none !important} html body .uc-body .nbn-plan-card .nbn-speed-arrow{ width:30px !important;height:30px !important;border-radius:99px !important; background:var(--orange) !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; display:inline-flex !important;align-items:center !important;justify-content:center !important; font-size:15px !important;font-weight:900 !important;flex:0 0 auto !important; line-height:1 !important;margin:0 !important;padding:0 !important} html body .uc-body .nbn-plan-card .nbn-typical-value{ font-size:27px !important;font-weight:900 !important;letter-spacing:-.035em !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; line-height:1 !important;margin:0 !important;justify-self:start} html body .uc-body .nbn-plan-card .nbn-speed-unit{ font-size:12px !important;font-weight:800 !important;color:#5b6070 !important; -webkit-text-fill-color:#5b6070 !important;margin:0 !important;opacity:1 !important; display:flex !important;align-items:baseline;gap:6px} /* DOWN / UP labels the theme's own card has and this markup does not. nth-of-type counts spans: 3 is the first unit, 6 the second. */ html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators span:nth-of-type(3)::after{content:"Down"} html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators span:nth-of-type(6)::after{content:"Up"} html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators span:nth-of-type(3)::after, html body .uc-body .nbn-plan-card .nbn-typical-speeds-indicators span:nth-of-type(6)::after{ margin-left:auto;font-size:11px;font-weight:700;color:#6a6f7e; -webkit-text-fill-color:#6a6f7e;letter-spacing:.06em;text-transform:uppercase} /* ---- Who it is for. The plugin floats this as a white pill, which disappears on a white card and overhangs its edge. ---- */ html body .uc-body .nbn-plan-card .nbn-users-box{ display:flex !important;gap:6px 16px !important;flex-wrap:wrap !important;align-items:center !important; background:transparent !important;border:0 !important;border-radius:0 !important; padding:0 !important;margin:0 0 14px !important;box-shadow:none !important; position:static !important;width:auto !important; font-size:12.5px !important;color:#5b6070 !important;font-weight:600 !important} html body .uc-body .nbn-plan-card .nbn-users-label{ font-size:10.5px !important;font-weight:800 !important;letter-spacing:.09em !important; text-transform:uppercase !important;color:#6a6f7e !important;-webkit-text-fill-color:#6a6f7e !important; width:100% !important;background:transparent !important;padding:0 !important} html body .uc-body .nbn-plan-card .nbn-users-stat{ color:#5b6070 !important;-webkit-text-fill-color:#5b6070 !important;background:transparent !important} html body .uc-body .nbn-plan-card .nbn-users-stat strong{ color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;font-weight:900 !important} html body .uc-body .nbn-plan-card .nbn-users-stat svg{color:#6a6f7e !important} /* ---- Price ---- */ html body .uc-body .nbn-plan-card .nbn-plan-pricing, html body .uc-body .nbn-plan-card .nbn-price-display, html body .uc-body .nbn-plan-card .nbn-price-container{ display:flex !important;align-items:baseline !important;gap:4px !important; flex-wrap:wrap !important;min-width:0;background:transparent !important; border:0 !important;padding:0 !important;margin:0 !important; min-height:0 !important;justify-content:flex-start !important;text-align:left !important} html body .uc-body .nbn-plan-card .nbn-price-container br{display:none !important} html body .uc-body .nbn-plan-card .nbn-price-value{ font-size:clamp(30px,2.9vw,40px) !important;font-weight:900 !important; letter-spacing:-.045em !important;line-height:1 !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;background:none !important} html body .uc-body .nbn-plan-card small{ font-size:13.5px !important;color:#5b6070 !important;-webkit-text-fill-color:#5b6070 !important; font-weight:700 !important} html body .uc-body .nbn-plan-card .nbn-plan-tagline, html body .uc-body .nbn-plan-card .nbn-plan-ideal, html body .uc-body .nbn-plan-card .nbn-plan-benefit, html body .uc-body .nbn-plan-card .nbn-plan-description{ font-size:13.5px !important;color:#5b6070 !important;-webkit-text-fill-color:#5b6070 !important; line-height:1.5 !important;margin:12px 0 0 !important;background:transparent !important; padding:0 !important;text-align:left !important;border:0 !important} /* ---- GT Rewards tag — the theme's corner flag ---- */ html body .uc-body .nbn-plan-card .nbn-gt-rewards-tag{ position:absolute !important;top:0 !important;right:0 !important;left:auto !important; background:var(--orange) !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; font-size:10px !important;font-weight:900 !important;letter-spacing:.1em !important; text-transform:uppercase !important;padding:7px 15px !important; border-radius:0 19px 0 13px !important;border:0 !important;margin:0 !important;width:auto !important} html body .uc-body .nbn-plan-card{position:relative !important} /* ---- Feature list ---- */ html body .uc-body .nbn-plan-card .nbn-best-for-head, html body .uc-body .nbn-plan-card .nbn-features-toggle{ font-size:10.5px !important;font-weight:900 !important;letter-spacing:.09em !important; text-transform:uppercase !important;color:#3d4351 !important;-webkit-text-fill-color:#3d4351 !important; background:transparent !important;border:0 !important;border-radius:0 !important; padding:18px 0 8px !important;width:100% !important;display:flex !important; justify-content:space-between !important;align-items:center !important; cursor:pointer;font-family:inherit;box-shadow:none !important;text-align:left !important} html body .uc-body .nbn-plan-card .nbn-toggle-icon{color:#6a6f7e !important;-webkit-text-fill-color:#6a6f7e !important} html body .uc-body .nbn-plan-card .nbn-best-for-list, html body .uc-body .nbn-plan-card .nbn-features-list{ list-style:none !important;padding:0 !important;margin:0 !important; font-size:13px !important;color:#3d4351 !important;line-height:1.5 !important; background:transparent !important} html body .uc-body .nbn-plan-card .nbn-best-for-list li, html body .uc-body .nbn-plan-card .nbn-feature-item{ display:flex !important;align-items:center !important;gap:9px !important; margin:0 0 9px !important;font-weight:600 !important; color:#3d4351 !important;-webkit-text-fill-color:#3d4351 !important; background:transparent !important;padding:0 !important;border:0 !important} html body .uc-body .nbn-plan-card .nbn-feature-text{color:#3d4351 !important;-webkit-text-fill-color:#3d4351 !important} html body .uc-body .nbn-plan-card .nbn-feature-icon{ width:16px !important;height:16px !important;flex:0 0 16px !important;object-fit:contain;opacity:.6} html body .uc-body .nbn-plan-card .nbn-svg-check{width:14px !important;height:14px !important;flex:0 0 14px} /* ---- Call to action ---- */ html body .uc-body .nbn-plan-card .nbn-plan-actions{margin-top:auto !important;padding-top:20px !important} html body .uc-body .nbn-plan-card .nbn-select-plan, html body .uc-body .nbn-plan-card .troppo-btn{ width:100% !important;padding:14px !important;font-size:13.5px !important; white-space:normal !important;background:var(--grad) !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; border:0 !important;border-radius:99px !important;box-shadow:none !important; font-weight:800 !important;text-transform:none !important;letter-spacing:0 !important; display:inline-flex !important;align-items:center;justify-content:center;height:auto !important} /* #b34400, not var(--orange): orange on white is ~3:1 and fails AA for text. */ html body .uc-body .nbn-plan-card .nbn-plan-cis{ margin-top:12px !important;text-align:center !important;background:transparent !important} html body .uc-body .nbn-plan-card .nbn-plan-cis a{ color:#b34400 !important;-webkit-text-fill-color:#b34400 !important; font-size:11.5px !important;font-weight:700 !important} /* ---- Headings inside the plugin's plans band ---- plans-display-unified.css paints these as gradient-clipped text (-webkit-text-fill-color:transparent). On the light band that renders as a white ghost, so the fill is handed back to a real colour. */ html body .uc-body .nbn-plans-display h1, html body .uc-body .nbn-plans-display h2, html body .uc-body .nbn-plans-display h3, html body .uc-body .nbn-plans-display .gt-section-title{ color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; background:none !important;-webkit-background-clip:border-box !important; background-clip:border-box !important} html body .uc-body .nbn-plans-display h1 span, html body .uc-body .nbn-plans-display h2 span, html body .uc-body .nbn-plans-display .highlight{ color:#b34400 !important;-webkit-text-fill-color:#b34400 !important; background:none !important} html body .uc-body .nbn-plans-display p{color:#5b6070 !important;-webkit-text-fill-color:#5b6070 !important} /* ---- Four corrections, each measured off the rendered card ---- 1. The rewards flag is a child of .nbn-plan-details, which the plugin sets position:relative — so top:0 anchored to the details box, i.e. exactly where the plan name starts, and the two overlapped. Making details static hands the flag back to the card. 2. .nbn-plan-name is display:flex from the plugin, which centred it under the flag rather than leaving it on the left as the theme's card does. 3. The featured card's class is .nbn-plan-featured, not .featured — the first pass missed it and Go Mega Fast stayed dark on a light band. 4. .troppo-theme-container carries padding-top:100px, which put 184px of dead space above the band's heading. */ html body .uc-body .nbn-plan-card .nbn-plan-details{position:static !important} html body .uc-body .nbn-plan-card .nbn-plan-name{ display:block !important;justify-content:flex-start !important;padding-right:0 !important} html body .uc-body .nbn-plan-card.nbn-plan-featured, html body .uc-body .nbn-plan-card.nbn-plan-featured .nbn-plan-details{ background:#fff !important;background-image:none !important;color:var(--ink) !important} html body .uc-body .nbn-plan-card.nbn-plan-featured{ box-shadow:0 0 0 2.5px var(--orange) !important;border-color:transparent !important} html body .uc-body .troppo-theme-container{ padding-top:clamp(28px,3.4vw,48px) !important;padding-bottom:clamp(20px,2.4vw,34px) !important} /* The "POPULAR" badge is the plugin's own; keep it, but make it read as the theme's flag rather than a pink pill floating over the plan name. */ html body .uc-body .nbn-plan-card .nbn-popular-badge, html body .uc-body .nbn-plan-card .nbn-plan-badge, html body .uc-body .nbn-plan-card .popular-badge{ background:var(--ink) !important;color:var(--off) !important; -webkit-text-fill-color:var(--off) !important;box-shadow:none !important; font-size:9.5px !important;font-weight:900 !important;letter-spacing:.1em !important; padding:5px 12px !important;border-radius:99px !important} /* ---- Final card corrections, all measured ---- .nbn-plan-tier ("NBN50/20") is display:none in the plugin, so the tech line the theme's card shows under every plan name was simply absent. The plan name also carries text-shadow 0 2px 4px rgba(0,0,0,.3) — sized for a dark card, and a smudge on a white one. */ html body .uc-body .nbn-plan-card .nbn-plan-tier{display:block !important} html body .uc-body .nbn-plan-card, html body .uc-body .nbn-plan-card *{text-shadow:none !important} /* IDEAL FOR was a centred three-line stack 57px tall; the theme's card states this as one quiet grey line. */ html body .uc-body .nbn-plan-card .nbn-users-box{ text-align:left !important;justify-content:flex-start !important; align-items:baseline !important;row-gap:4px !important} /* The category filter rendered as a full-width 1168px beige bar. It is the same control as the billing toggle beside it and should read as one. */ html body .uc-body .nbn-plan-filters{ display:inline-flex !important;width:auto !important;max-width:none !important; background:#e9e5df !important;border-radius:99px !important;padding:4px !important; margin:0 auto 14px !important;flex:0 0 auto !important} html body .uc-body .nbn-plans-display .nbn-plan-filters-wrap, html body .uc-body .nbn-plans-display .nbn-filters-row{ display:flex !important;justify-content:center !important} /* The plugin hides its carousel arrows above 1200px; they were still painting over the outer cards at 1440. Four cards fit, so there is nothing to scroll. */ @media(min-width:1200px){ html body .uc-body .nbn-scroll-arrow{display:none !important} } /* ---- POPULAR tag ---- .nbn-popular-tag is absolutely positioned inside .nbn-plan-header. Once .nbn-plan-details was made static it began anchoring to the card, landing on top of the plan name. Pinning it to the card's top-left mirrors the rewards flag at top-right and takes it out of the flow entirely, so the featured card's rows stay level with its neighbours. */ html body .uc-body .nbn-plan-card .nbn-popular-tag{ top:0 !important;left:0 !important;right:auto !important;bottom:auto !important; background:var(--ink) !important;color:var(--off) !important; -webkit-text-fill-color:var(--off) !important;box-shadow:none !important; font-size:9.5px !important;font-weight:900 !important;letter-spacing:.1em !important; text-transform:uppercase !important;padding:7px 14px !important; border-radius:19px 0 13px 0 !important;margin:0 !important;transform:none !important} /* Everything in the card body reads left, as the theme's card does — the plugin centres several of these for its own layout. The CTA and the fine print under it are the deliberate exceptions. */ html body .uc-body .nbn-plan-card .nbn-plan-details > *, html body .uc-body .nbn-plan-card .nbn-plan-description, html body .uc-body .nbn-plan-card .nbn-plan-description > *{text-align:left !important} html body .uc-body .nbn-plan-card .nbn-plan-actions, html body .uc-body .nbn-plan-card .nbn-plan-cis{text-align:center !important} /* ---- Filters, footnotes, links on the light band ---- */ body .uc-body .nbn-plan-filters, body .uc-body .nbn-payment-filters, body .uc-body .nbn-plans-filters{ display:inline-flex !important;background:#e9e5df !important;border-radius:99px !important; padding:4px !important;margin:0 0 26px !important;flex-wrap:wrap;gap:2px; border:0 !important;box-shadow:none !important} body .uc-body .nbn-plan-filter, body .uc-body .nbn-payment-filter{ border:0 !important;background:transparent !important;font-family:inherit; font-weight:800 !important;font-size:13px !important;padding:10px 20px !important; border-radius:99px !important;cursor:pointer;color:#5b6070 !important; text-decoration:none !important;box-shadow:none !important;text-transform:none !important} body .uc-body .nbn-plan-filter.active, body .uc-body .nbn-payment-filter.active, body .uc-body .nbn-payment-filter[aria-pressed="true"]{ background:var(--ink) !important;color:var(--off) !important} body .uc-body .nbn-plans-footnotes{color:#6a6f7e !important;font-size:11.5px !important; display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:26px !important} body .uc-body .nbn-footnote{display:inline-flex;align-items:center;gap:7px;color:#6a6f7e !important} body .uc-body .nbn-footnote svg{color:#6a6f7e} body .uc-body .nbn-address-check-cta{margin-top:28px !important;text-align:center} body .uc-body .nbn-address-check-cta p{color:#5b6070 !important;font-size:15px !important;margin-bottom:14px} body .uc-body .nbn-plan-info-links{ display:flex !important;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap; font-size:12px !important;line-height:1.4 !important;margin-top:22px !important;color:#6a6f7e !important} body .uc-body .nbn-plan-info-links a{font-size:12px !important;font-weight:700;color:#b34400 !important} body .uc-body .nbn-plan-info-links .link-separator{opacity:.4} /* The carousel arrows are only for the sub-1200px widths the plugin scrolls at. */ body .uc-body .nbn-scroll-arrow{background:#fff !important;color:var(--ink) !important; border:1px solid rgba(0,0,0,.12) !important;box-shadow:0 4px 14px rgba(0,0,0,.12) !important} /* ============================================================ 7. Speed matrix (.gt-speed-table) — on the light band ------------------------------------------------------------ Sits directly under the plan grid and shares its off-white ground, so the two evidence sections read as one light zone between the dark bands, matching the homepage rhythm. Up to 6 tier columns x 14 rows. It scrolls horizontally with the first column pinned. Only ONE sticky axis is used: a position:sticky is inert inside an overflow container, so the row label is the axis that actually works — and it is the one that matters when reading across tiers. All accents are darkened for AA on #fafafa: var(--orange) on off-white is about 3:1 and fails for text. ============================================================ */ .uc-body .kb-row-layout-wrap:has(.gt-speed-section){ background:var(--off) !important;color:var(--ink) !important;border-top:0 !important} .uc-body .gt-speed-section{margin-block:0} .uc-body .gt-speed-section .gt-section-title{color:var(--ink)} .uc-body .gt-speed-section .gt-section-title span{color:#b34400} .uc-body .gt-speed-section .gt-section-subtitle{color:#5b6070} .uc-body .gt-table-wrapper{ overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid rgba(0,0,0,.1);border-radius:16px;background:#fff} body .uc-body .gt-speed-table{ width:100%;border-collapse:collapse;font-size:13.5px;min-width:820px;margin:0; background:transparent !important} .uc-body .gt-speed-table th, .uc-body .gt-speed-table td{ padding:13px 16px;text-align:center;color:var(--ink); border-bottom:1px solid rgba(0,0,0,.07);white-space:nowrap;background:transparent} .uc-body .gt-speed-table thead th{ background:#f1eee9;color:var(--ink); font-size:11px;font-weight:900;letter-spacing:.07em;text-transform:uppercase; border-bottom:1px solid rgba(0,0,0,.12)} .uc-body .gt-speed-table tbody tr:nth-child(even) td{background:#faf9f7} .uc-body .gt-speed-table tbody tr:last-child td{border-bottom:0} /* Pinned row-label column. */ .uc-body .gt-speed-table th:first-child, .uc-body .gt-speed-table td:first-child{ position:sticky;left:0;z-index:2;text-align:left; background:#fff;border-right:1px solid rgba(0,0,0,.1); font-weight:800;color:var(--ink);white-space:normal;min-width:210px} .uc-body .gt-speed-table tbody tr:nth-child(even) td:first-child{background:#faf9f7} .uc-body .gt-speed-table thead th:first-child{background:#f1eee9;z-index:3} /* The recommended tier column. */ .uc-body .gt-speed-table td.recommended{background:rgba(255,98,0,.06)} .uc-body .gt-speed-table tbody tr:nth-child(even) td.recommended{background:rgba(255,98,0,.09)} .uc-body .gt-speed-table thead th.recommended{ background:var(--orange);color:var(--ink);border-bottom-color:var(--orange)} .uc-body .gt-speed-table .recommended-badge{ background:var(--ink);color:var(--off);border-radius:99px;padding:3px 9px; font-size:9px;font-weight:900;letter-spacing:.08em;display:inline-block;margin-bottom:5px} .uc-body .gt-speed-table .speed-tier{color:inherit;font-weight:800} /* Cell value types. These modifier classes are already in the customer's markup, so the ramp needs no JavaScript and no content edit — and it stays correct on pages whose scale is inverted, like Holiday Homes' "Value When Vacant" row. */ .uc-body .gt-rating{ display:inline-block;min-width:78px;padding:5px 12px;border-radius:99px; font-size:11.5px;font-weight:800;letter-spacing:.02em} .uc-body .gt-rating.limited {background:#ecedf1;color:#63697a} .uc-body .gt-rating.okay {background:#fdeed6;color:#8a5300} .uc-body .gt-rating.good {background:#dff5ef;color:#0c7361} .uc-body .gt-rating.great {background:#bdeee1;color:#075c4c} .uc-body .gt-rating.excellent{background:#12b394;color:#fff} .uc-body .gt-value{font-weight:800;color:var(--ink)} .uc-body .gt-value.speed{font-size:15px;letter-spacing:-.02em} .uc-body .gt-time{font-weight:700;font-size:12.5px} .uc-body .gt-time.slow {color:#8b90a0} .uc-body .gt-time.medium{color:#8a5300} .uc-body .gt-time.fast {color:#0c7361} .uc-body .gt-fttp-badge{ display:inline-block;margin-top:5px;padding:3px 9px;border-radius:6px; background:#efe3fb;border:1px solid #d3b9ee;color:#5b1a9e; font-size:9.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} /* Notes and callout, on the light band. */ .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-notes{ background:transparent;padding:0;color:#6a6f7e;font-size:11.5px;margin-top:16px;line-height:1.65} .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-notes p{color:#6a6f7e} .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-notes strong{color:var(--ink)} .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-callout{ background:#fff;border-left:3px solid var(--orange);border-radius:0 14px 14px 0; padding:20px 24px;margin-top:26px;color:#3d4351; box-shadow:0 2px 14px rgba(0,0,0,.05)} .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-callout strong, .uc-body .kb-row-layout-wrap:has(.gt-speed-section) .gt-callout b{color:var(--ink)} .uc-body .kb-row-layout-wrap:has(.gt-speed-section) a{color:#b34400} /* ---- Plan-name row ---- The cells hold , which carries a dark teal fill from the old design. On the light band that was the one dark stripe across an otherwise clean table. */ .uc-body .gt-speed-table .plan-name{ background:transparent !important;color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; font-weight:900 !important;font-size:14px !important; padding:0 !important;border-radius:0 !important;display:inline !important} .uc-body .gt-speed-table tr.plan-row td{ background:#f6f4f1;border-bottom:1px solid rgba(0,0,0,.12)} .uc-body .gt-speed-table tr.plan-row td:first-child{background:#f1eee9} .uc-body .gt-speed-table tr.plan-row td.recommended{background:rgba(255,98,0,.12)} /* The recommended cell keeps its own dark fill through a more specific plugin rule, so it needs the same weight as the rest of the row. */ html body .uc-body .gt-speed-table td.recommended .plan-name, html body .uc-body .gt-speed-table .plan-name{ background:transparent !important;background-image:none !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important} /* ---- Fit the six tiers ---- Natural table width measured 1149px inside a 1126px viewport: the last column was clipped by 23px on a 1440 desktop. Tighter cells and a narrower label column bring it inside without shrinking any type. It still scrolls below that, which is the intended behaviour on a phone. */ .uc-body .gt-speed-table th, .uc-body .gt-speed-table td{padding:12px 11px} .uc-body .gt-speed-table th:first-child, .uc-body .gt-speed-table td:first-child{min-width:178px;padding-left:16px;padding-right:14px} .uc-body .gt-table-wrapper{overflow:auto} /* ============================================================ 8. Callouts, notes, footnotes ============================================================ */ .uc-body .gt-callout{ background:rgba(255,98,0,.08);border-left:3px solid var(--orange); border-radius:0 14px 14px 0;padding:20px 24px;margin-top:26px; font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.86); } .uc-body .gt-callout strong,.uc-body .gt-callout b{color:var(--off)} .uc-body .gt-callout p:last-child{margin-bottom:0} .uc-body .gt-notes{background:transparent;padding:0;font-size:11.5px; color:rgba(255,255,255,.52);margin-top:16px;line-height:1.65} .uc-body .gt-notes p{font-size:inherit;color:inherit;margin:0 0 6px} /* ============================================================ 9. Feature grids and tick lists (outside the plan cards) ============================================================ */ .uc-body .kt-has-2-columns .kt-inside-inner-col > h4, .uc-body .kt-has-3-columns .kt-inside-inner-col > h4, .uc-body .kt-has-4-columns .kt-inside-inner-col > h4{ color:var(--off);font-size:17px;margin-bottom:8px} /* A column that is just heading + blurb becomes a card. */ .uc-body .kt-has-3-columns > .wp-block-kadence-column, .uc-body .kt-has-4-columns > .wp-block-kadence-column{ background:rgba(255,255,255,.035) !important; border:1px solid var(--line) !important; border-radius:16px;padding:26px 24px !important; } .uc-body .nbn-highlight-check{display:flex;align-items:flex-start;gap:11px;margin-bottom:12px; font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.8)} .uc-body .nbn-highlight-check strong{color:var(--off)} .uc-body .nbn-svg-check{color:var(--teal);flex:0 0 auto;margin-top:3px} .uc-body ul:not([class]){list-style:none;padding:0;margin:0 0 18px} .uc-body ul:not([class]) li{position:relative;padding-left:22px;margin-bottom:10px; font-size:15px;line-height:1.55;color:rgba(255,255,255,.8)} .uc-body ul:not([class]) li::before{content:"";position:absolute;left:0;top:8px; width:9px;height:9px;border-radius:99px;background:var(--orange)} /* ============================================================ 10. FAQ accordion (Kadence) ------------------------------------------------------------ Open/close stays Kadence's own JS. This only paints it, including the hidden-panel rule Kadence itself relies on, so the closed state renders correctly even before the plugin's stylesheet loads. ============================================================ */ .uc-body .kt-accordion-inner-wrap{display:grid;gap:10px;max-width:900px} .uc-body .kt-accordion-pane{background:rgba(255,255,255,.04);border:1px solid var(--line); border-radius:14px;overflow:hidden} .uc-body .kt-accordion-header-wrap{margin:0} .uc-body .kt-blocks-accordion-header{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; background:transparent;border:0;cursor:pointer; padding:18px 22px;text-align:left;font-family:inherit; font-size:15.5px;font-weight:800;color:var(--off);line-height:1.35; } .uc-body .kt-blocks-accordion-header:hover{background:rgba(255,255,255,.03)} .uc-body .kt-blocks-accordion-title-wrap{flex:1 1 auto;min-width:0} .uc-body .kt-blocks-accordion-icon-trigger{ flex:0 0 22px;width:22px;height:22px;position:relative;opacity:.75} .uc-body .kt-blocks-accordion-icon-trigger::before, .uc-body .kt-blocks-accordion-icon-trigger::after{ content:"";position:absolute;left:50%;top:50%;background:var(--orange);border-radius:2px; transform:translate(-50%,-50%);transition:opacity .15s} .uc-body .kt-blocks-accordion-icon-trigger::before{width:13px;height:2.4px} .uc-body .kt-blocks-accordion-icon-trigger::after{width:2.4px;height:13px} .uc-body .kt-accordion-pane-active .kt-blocks-accordion-icon-trigger::after, .uc-body [aria-expanded="true"] .kt-blocks-accordion-icon-trigger::after{opacity:0} .uc-body .kt-accordion-panel-hidden{display:none} .uc-body .kt-accordion-panel-inner{padding:0 22px 20px;font-size:14.5px;line-height:1.65; color:rgba(255,255,255,.78)} .uc-body .kt-accordion-panel-inner p:last-child{margin-bottom:0} /* ============================================================ 11. Rewards CTA in the content ============================================================ */ .uc-body .gt-rewards-cta{ background:var(--purple);border-radius:22px;padding:clamp(30px,4vw,52px); text-align:center;color:#fff} .uc-body .gt-rewards-cta h2,.uc-body .gt-rewards-cta h3{color:#fff} .uc-body .gt-rewards-cta p{color:rgba(255,255,255,.86)} .uc-body .gt-rewards-cta a{background:#fff;color:var(--purple) !important; text-decoration:none !important;border-radius:99px;padding:14px 28px; font-weight:800;display:inline-block;margin-top:8px} /* ============================================================ 12. Sibling rail and hub ============================================================ */ .uc-rail{background:var(--ink);border-top:1px solid var(--line);padding-block:56px 62px} .uc-rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:22px; flex-wrap:wrap;margin-bottom:28px} .uc-rail h2{font-size:clamp(26px,3.4vw,40px);margin:8px 0 0} .uc-rail h2 em{font-style:normal;color:var(--orange)} .uc-hub-group{background:var(--bg);padding-block:52px} .uc-hub-group:nth-of-type(even){background:var(--ink)} .uc-hub-head{margin-bottom:26px} .uc-hub-head h2{font-size:clamp(26px,3.4vw,40px);margin:0} .uc-hub-head p{color:var(--muted);font-size:15.5px;margin-top:10px;max-width:52ch} /* ============================================================ 14. Corrections from the first visual pass ------------------------------------------------------------ Everything here was found by screenshotting the real pages at 1440 and 390, not by reading computed styles. Each rule notes what it fixes. ============================================================ */ /* The accent word in the checker heading is . That gradient was chosen for the old LIGHT design; on the dark card it renders as a pink slab, and orange text on it is unreadable. Author !important is the only thing that outranks an inline declaration. The accent survives as orange type, which is how the rest of the theme marks an emphasised word. */ .uc-body .highlight, .uc-body mark{ background-image:none !important; background-color:transparent !important; color:var(--orange) !important; padding:0 !important; } .uc-body h1 .highlight,.uc-body h2 .highlight, .uc-body h1 mark,.uc-body h2 mark{font-weight:inherit} /* The plugin's floating label repeats the input's own placeholder, so on a stylesheet that does not position it, it prints as loose text under the field. Keep it for screen readers, take it out of the layout. */ .uc-body .nbn-floating-label{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* The value strip is full-bleed on the live site; inside the content lane it has to align with everything above it, and its icon tiles are brand yellow with an offset orange shadow — that pairing is on-brand, so restore it rather than flattening it to grey as the first pass did. */ .uc-body .gt-valuestrip__row{gap:16px 38px} .uc-body .gt-vs-ic::after{ display:block;content:"";position:absolute;inset:0;border-radius:10px; background:var(--orange);transform:translate(3px,3px);z-index:0} .uc-body .gt-vs-ic__f{position:relative;z-index:1;background:#ffde59;border:0} .uc-body .gt-vs-ic__f svg{width:20px;height:20px;color:#100f1d} /* ---- Kadence Info Boxes ---- These are the "Why choose GoTroppo for X" feature cards on 14 of the 15 pages. Kadence normally sizes the icons from generated per-block CSS; without it the inline SVGs render at their intrinsic size and blow out of the card. */ .uc-body .kt-has-3-columns > .wp-block-kadence-column, .uc-body .kt-has-4-columns > .wp-block-kadence-column{ background:none !important;border:0 !important;padding:0 !important} .uc-body .wp-block-kadence-infobox{height:100%} .uc-body .kt-blocks-info-box-link-wrap{ display:flex;flex-direction:column;gap:0;height:100%; background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:16px; padding:28px 26px 26px;text-decoration:none !important;color:inherit; transition:border-color .15s,transform .15s} .uc-body a.kt-blocks-info-box-link-wrap:hover{border-color:var(--orange);transform:translateY(-2px)} .uc-body .kt-blocks-info-box-media-container{margin:0 0 18px} .uc-body .kt-blocks-info-box-media, .uc-body .kadence-info-box-icon-container, .uc-body .kadence-info-box-icon-inner-container{display:block;background:none !important;padding:0 !important} /* Scoped to the info-box media slot: .kb-svg-icon-wrap is also the icon inside Kadence BUTTONS, and the unscoped version put a 46px teal tile in "See our plans" (Entertainment Streaming). */ .uc-body .kt-blocks-info-box-media .kb-svg-icon-wrap{display:inline-flex;align-items:center;justify-content:center; width:46px;height:46px;border-radius:12px;background:rgba(32,214,180,.12)} .uc-body .kt-blocks-info-box-media .kb-svg-icon-wrap svg{width:24px;height:24px;color:var(--teal);fill:currentColor} .uc-body .kt-blocks-info-box-media img{width:44px;height:44px;object-fit:contain} .uc-body .kt-infobox-textcontent{flex:1 1 auto} .uc-body .kt-blocks-info-box-title{font-size:18px;margin:0 0 8px;color:var(--off)} .uc-body .kt-blocks-info-box-text{font-size:14.5px;line-height:1.6;margin:0;color:rgba(255,255,255,.74)} /* Rows of info boxes need to be a grid at the row level, not just at the column level, or the cards no longer share a baseline once the copy lengths differ. */ .uc-body .kt-has-2-columns > .wp-block-kadence-column, .uc-body .kt-has-3-columns > .wp-block-kadence-column, .uc-body .kt-has-4-columns > .wp-block-kadence-column{display:flex} .uc-body .kt-has-2-columns > .wp-block-kadence-column > .kt-inside-inner-col, .uc-body .kt-has-3-columns > .wp-block-kadence-column > .kt-inside-inner-col, .uc-body .kt-has-4-columns > .wp-block-kadence-column > .kt-inside-inner-col{flex:1 1 auto;display:flex} .uc-body .kt-has-3-columns .wp-block-kadence-infobox, .uc-body .kt-has-4-columns .wp-block-kadence-infobox, .uc-body .kt-has-2-columns .wp-block-kadence-infobox{flex:1 1 auto} /* A nested row inside a column must not re-apply the outer band's padding — that is what was adding a second 68px gap above every feature grid. */ .uc-body .kt-inside-inner-col .kb-row-layout-wrap{padding:0 !important;border-top:0} .uc-body .kt-inside-inner-col .kt-row-column-wrap{padding-inline:0 !important;max-width:none} /* Any other loose image in the content (not a plan-card or info-box icon). */ .uc-body .kt-inside-inner-col > figure img, .uc-body .wp-block-image img{border-radius:16px;height:auto} /* ---- Lane for content that is not wrapped in a Kadence row ---- Measured, not assumed: .gt-valuestrip sits as a direct child of the content with no row around it, so it rendered flush to both viewport edges while every other band was inset. Rather than special-casing that one component, give the lane to any top-level content block that is not already a row. */ .uc-body > *:not(.kb-row-layout-wrap){ max-width:var(--wrap);margin-inline:auto; padding-inline:clamp(20px,5vw,56px); padding-block:clamp(26px,3vw,40px); } .uc-body > .kb-row-layout-wrap ~ *:not(.kb-row-layout-wrap){border-top:1px solid rgba(255,255,255,.07)} /* ---- Equal-height cards ---- Measured heights in a three-up info-box row were 251 / 228 / 228 because the grid was aligning items to the start. Cards in a row share a baseline. */ .uc-body .kt-row-column-wrap{align-items:stretch} /* ============================================================ 15. Weight corrections — measured against the live plugin CSS ------------------------------------------------------------ The go-troppo plugin ships ~600 !important declarations at `body .nbn-plugin-wrapper .nbn-plan-card …` specificity (0,3,1). Almost all of the skin above still wins on source order, but four declarations do not — they were found by loading the customer's real stylesheets locally ahead of this file and reading the computed values back, not by guessing. These four are therefore written to match: a `body` prefix to reach the same specificity, plus !important to enter the same cascade bucket. Being later in source order then decides it. Nothing else in this file needs that weight, and nothing here changes plugin behaviour — only paint and box metrics. If the plugin is updated, re-run the check in the handover (NBN-FOR-YOU-HANDOVER.md, "Verifying the skin still wins"). ============================================================ */ /* ============================================================ 16. Structures that only appear on the Getting Started pages ------------------------------------------------------------ The three Getting Started pages are shaped differently from the other thirteen: no address checker, no plan grid, no speed matrix. Instead they carry Kadence Buttons, a Kadence Advanced Form and a grid of link cards. None of that surfaced while only the streaming page was being checked. ============================================================ */ /* ---- Kadence Buttons ---- .kb-button ships Kadence's default fill, measured as rgb(54,51,225) — a flat blue that belongs to no part of this brand. */ .uc-body .kb-button, .uc-body a.kb-button, .uc-body .kt-button{ display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--grad) !important;color:var(--ink) !important; border:0 !important;border-radius:99px !important; font-family:inherit;font-weight:800;font-size:14px; padding:14px 26px !important;text-decoration:none !important;line-height:1.2; width:auto !important;min-width:0 !important; } .uc-body .kb-button:hover{filter:brightness(1.06);color:var(--ink) !important} .uc-body .kb-button .kt-btn-inner-text{color:inherit} /* ---- Info-box "learn more" ---- Ships color:#444 — dark grey on a dark card, effectively invisible. It is the card's call to action, so it reads as one. */ .uc-body .kt-blocks-info-box-learnmore-wrap{margin-top:14px} .uc-body .kt-blocks-info-box-learnmore{ color:var(--orange);font-weight:800;font-size:13.5px; display:inline-flex;align-items:center;gap:6px} .uc-body .kt-blocks-info-box-learnmore::after{content:"→";font-weight:700} .uc-body a:hover .kt-blocks-info-box-learnmore{color:var(--off)} /* ---- Empty duplicate link wraps ---- Each of these info boxes is followed by

— an empty second copy of the wrapper. With the card styling applied that rendered as a stray bordered strip under every card. */ .uc-body .kt-blocks-info-box-link-wrap:empty{display:none} .uc-body p:has(> .kt-blocks-info-box-link-wrap:empty){display:none} .uc-body .kt-blocks-info-box-link-wrap > p:empty{display:none} /* ---- Kadence Advanced Form ---- Renders as raw white inputs with no theme styling at all. */ .uc-body .kb-advanced-form{display:grid;gap:16px;max-width:520px} .uc-body .kb-adv-form-field{display:grid;gap:7px} .uc-body .kb-adv-form-label{ font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:rgba(255,255,255,.7)} .uc-body .kb-adv-form-required{color:var(--orange);margin-left:3px} .uc-body .kb-field, .uc-body .kb-text-field, .uc-body .kb-advanced-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .uc-body .kb-advanced-form textarea, .uc-body .kb-advanced-form select{ width:100%;background:rgba(255,255,255,.07);color:var(--off); border:1px solid var(--line);border-radius:12px; padding:13px 16px;font-family:inherit;font-size:15px} .uc-body .kb-advanced-form textarea{min-height:130px;resize:vertical} .uc-body .kb-advanced-form ::placeholder{color:rgba(255,255,255,.42)} .uc-body .kb-field:focus, .uc-body .kb-advanced-form textarea:focus{outline:2px solid var(--orange);outline-offset:2px} .uc-body .kb-advanced-form button[type=submit], .uc-body .kb-advanced-form input[type=submit], .uc-body .kb-adv-form-submit-button{ background:var(--grad) !important;color:var(--ink) !important;border:0 !important; border-radius:99px !important;font-family:inherit;font-weight:800;font-size:14.5px; padding:15px 30px !important;cursor:pointer;justify-self:start;width:auto !important} .uc-body .kb-adv-form-message{border-radius:12px;padding:13px 17px;font-size:14px} /* Two-column rows on these pages are text beside text, not cards, so they must not pick up the card treatment the feature grids use. */ .uc-body .kt-has-2-columns > .wp-block-kadence-column > .kt-inside-inner-col > h3, .uc-body .kt-has-2-columns > .wp-block-kadence-column > .kt-inside-inner-col > h4{margin-top:0} /* Ordered lists in the setup steps. */ .uc-body ol:not([class]){padding-left:22px;margin:0 0 18px} .uc-body ol:not([class]) li{margin-bottom:9px;font-size:15px;line-height:1.55; color:rgba(255,255,255,.8)} .uc-body ol:not([class]) li::marker{color:var(--orange);font-weight:800} /* ---- Small-screen corrections ---- Measured in a real 390px viewport, not a headless capture: headless Chrome at --window-size=390 lays this page out differently from a browser at 390 and reported overflow that does not exist. Only two things genuinely overflow. */ /* .troppo-wave is a 700px decorative SVG band. It has no layout job here and pushes the page 330px wide on a phone. */ .uc-body .troppo-wave{display:none} /* The plugin's container adds 18px of inline padding on top of the lane's own, putting it 12px past the viewport at 390. */ @media(max-width:680px){ body .uc-body .nbn-plans-container{padding-inline:0 !important;max-width:100% !important} /* 48px of padding inside a ~330px card leaves barely 230px of usable width. */ .uc-body .nbn-search-wrapper{padding:0 !important} .uc-body .nbn-search-main-card{padding:22px 18px} .uc-body .nbn-progress-steps{gap:8px} .uc-body .nbn-step{padding:7px 13px 7px 7px;font-size:11.5px} } /* ---- Gutter ---- Measured across every page: seven bands sit at left:129 and one at 149. .gt-speed-section carries 20px of its own inline padding, so the matrix heading was the only thing on the page not on the shared gutter. */ .uc-body .gt-speed-section{padding-inline:0 !important;margin-inline:0 !important} /* 9px is below the theme's smallest step; the micro-labels sit at 10px like the plan-card flag they sit next to. */ .uc-body .gt-speed-table .recommended-badge{font-size:10px} .uc-body .gt-fttp-badge{font-size:10px} html body .uc-body .nbn-plan-card .nbn-popular-tag{font-size:10px !important} /* .nbn-plan-header is also position:relative, so the POPULAR tag anchored to it rather than to the card and landed on the plan name. */ html body .uc-body .nbn-plan-card .nbn-plan-header{position:static !important} /* ---- Address-check success panel ---- .nbn-qualification-success is the plugin's "we can connect you" state. Its visibility is driven by the plugin's JavaScript, so it is styled here and never force-hidden — hiding it would break the real success state on a site where the script does run. It renders unhidden in a local no-JS render, which is why it appears in the reference screenshots. Panel, not a solid teal slab with a 49px heading inside it. */ html body .uc-body .nbn-qualification-success{ /* display is set in section 17 WITHOUT !important — see the note there */ align-items:center !important;gap:16px !important; flex-wrap:wrap;width:auto !important;max-width:660px; background:rgba(32,214,180,.1) !important; border:1px solid rgba(32,214,180,.45) !important; border-radius:16px !important;padding:18px 22px !important;margin-top:20px !important; color:var(--off) !important;-webkit-text-fill-color:var(--off) !important; box-shadow:none !important} html body .uc-body .nbn-qualification-success h2, html body .uc-body .nbn-qualification-success h3{ font-size:17px !important;margin:0 !important;color:var(--teal) !important; -webkit-text-fill-color:var(--teal) !important;letter-spacing:-.01em !important; line-height:1.2 !important;width:auto !important} html body .uc-body .nbn-qualification-success p, html body .uc-body .nbn-qualification-success .nbn-success-message{ font-size:14px !important;color:rgba(255,255,255,.8) !important; -webkit-text-fill-color:rgba(255,255,255,.8) !important;margin:0 !important} html body .uc-body .nbn-qualification-success .nbn-success-icon{ width:20px !important;height:20px !important;flex:0 0 20px !important;color:var(--teal) !important} html body .uc-body .nbn-qualification-success a, html body .uc-body .nbn-qualification-success button{ margin-left:auto;padding:11px 22px !important;font-size:13.5px !important; border-radius:99px !important;background:var(--grad) !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; border:0 !important;font-weight:800 !important;text-decoration:none !important; white-space:nowrap;height:auto !important;width:auto !important} html body .uc-body .nbn-results-container{background:transparent !important;padding:0 !important} /* ---- Empty nodes in the plugin's card markup ---- The featured card's header carries an empty

that the content typography gives a 16px bottom margin, which pushed Go Mega Fast's whole card 16px lower than its neighbours. Every card also opens with a stray
worth 21px of dead space above the plan name. Neither carries content. */ .uc-body p:empty{display:none !important;margin:0 !important} .uc-body .nbn-plan-card > br, .uc-body .nbn-plan-card .nbn-plan-header > br{display:none !important} /* The success panel's tick is an empty div whose SVG has no intrinsic size, so it collapsed to 0x0 and its green fill showed as a stray chip. */ html body .uc-body .nbn-qualification-success .nbn-success-icon{ width:22px !important;height:22px !important;flex:0 0 22px !important; background:transparent !important;border:0 !important;border-radius:0 !important; padding:0 !important;display:inline-flex !important;align-items:center;justify-content:center; color:var(--teal) !important;order:-1} html body .uc-body .nbn-qualification-success .nbn-success-icon svg{ width:22px !important;height:22px !important;display:block;color:var(--teal) !important} /* The one-line benefit under IDEAL FOR was still centring on short strings while the two-line ones read left, so the column edge moved card to card. */ html body .uc-body .nbn-plan-card .nbn-plan-benefit, html body .uc-body .nbn-plan-card .nbn-plan-benefit *{text-align:left !important} /* ============================================================ 17. Homepage parity pass ------------------------------------------------------------ Each block below maps a plugin or Kadence structure onto the homepage component it should read as. The reference is style.css: .plans .head, .kick, .trust, .finep and order.css's .stp stepper. ============================================================ */ /* ---- A. Plans band = the homepage .plans section ---- The homepage puts the heading top-left, the billing toggle top-right on the heading's baseline, the grid under both, and the fine print under that. The plugin's markup has the same five pieces in a column, so the inner wrapper becomes a grid with those areas. The band itself goes full-bleed off-white by painting the Kadence ROW, exactly as the speed-matrix row is handled, so the two light sections read as one zone between the dark bands. */ .uc-body .kb-row-layout-wrap:has(.nbn-plans-display){ background:var(--off) !important;color:var(--ink) !important} html body .uc-body .nbn-plugin-wrapper.nbn-plans-display, html body .uc-body .troppo-theme-container, html body .uc-body .nbn-plans-container{ background:transparent !important;padding:0 !important;margin:0 !important; width:auto !important;max-width:none !important} html body .uc-body .troppo-bg-waves{display:none !important} html body .uc-body .nbn-plans-container > br{display:none !important} html body .uc-body .troppo-theme-container > .nbn-plans-display{ display:grid !important; grid-template-columns:1fr auto auto; grid-template-areas:"title cat pay" "cont cont cont" "notes notes notes"; align-items:end;column-gap:10px;row-gap:0; text-align:left !important;width:auto !important;max-width:none !important; padding:0 !important;margin:0 !important} html body .uc-body .nbn-plans-title{ grid-area:title; font-size:clamp(30px,4.2vw,46px) !important;line-height:1.06 !important; letter-spacing:-.03em !important;font-weight:900 !important; color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; background:none !important;-webkit-background-clip:border-box !important; text-align:left !important;margin:0 !important;padding:0 !important;max-width:16ch} html body .uc-body .nbn-plans-title::before, html body .uc-body .nbn-plans-title::after{display:none !important;content:none !important} html body .uc-body .nbn-plans-title .troppo-highlight{ color:inherit !important;-webkit-text-fill-color:inherit !important;background:none !important} html body .uc-body .nbn-plan-filters{grid-area:cat;margin:0 !important;justify-self:end} html body .uc-body .nbn-payment-filters{grid-area:pay;margin:0 !important;justify-self:end} html body .uc-body .nbn-plans-container{grid-area:cont;margin-top:38px !important} /* .finep: 11.5px #6a6f7e, one line, left. The plugin separates its three notes with
, which stacked them and pushed them to the centre. */ html body .uc-body .nbn-plans-footnotes{ grid-area:notes;display:flex !important;flex-wrap:wrap;gap:6px 22px; justify-content:flex-start !important;margin:20px 0 0 !important;padding:0 !important; font-size:11.5px !important;color:#6a6f7e !important;text-align:left !important} html body .uc-body .nbn-plans-footnotes br{display:none !important} html body .uc-body .nbn-plan-info-links{ justify-content:flex-start !important;margin:10px 0 0 !important;padding:0 !important} /* The "Wildly Fast" accent has no equivalent on the homepage band — .plans h2 is plain ink — and its colour is the old design's gradient. Plain ink here too. */ html body .uc-body .nbn-plans-display h2 span{color:inherit !important;-webkit-text-fill-color:inherit !important} /* ---- B. Address-check success panel ---- The plugin ships this with an inline style="display:none" and shows it from its JavaScript once an address qualifies. The previous pass set display:flex with !important, which outranks an inline style — so the panel was forced visible on every page load, before any address had been entered. That is a behaviour change, and on the live site it would have been a bug. display is set here WITHOUT !important so the inline value keeps control; the children are laid out to read correctly whether the plugin reveals it as block or flex. The "random tick" was the plugin's own icon div beside a second icon injected by its button; the button's leading
is what threw the label off. */ html body .uc-body .nbn-qualification-success{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px; width:auto !important;max-width:660px;margin-top:20px !important; background:rgba(32,214,180,.08) !important;border:1px solid rgba(32,214,180,.4) !important; border-radius:16px !important;padding:18px 22px !important;box-shadow:none !important; color:var(--off) !important;-webkit-text-fill-color:var(--off) !important} html body .uc-body .nbn-qualification-success .nbn-success-icon{ display:inline-flex !important;vertical-align:middle;width:22px !important;height:22px !important; flex:0 0 22px !important;order:0;margin:0 !important;padding:0 !important; background:transparent !important;border:0 !important;color:var(--teal) !important} html body .uc-body .nbn-qualification-success .nbn-success-icon svg{width:22px !important;height:22px !important} html body .uc-body .nbn-qualification-success h2{ display:inline-block !important;vertical-align:middle; font-size:17px !important;line-height:1.2 !important;margin:0 !important;width:auto !important; color:var(--teal) !important;-webkit-text-fill-color:var(--teal) !important;letter-spacing:-.01em} html body .uc-body .nbn-qualification-success .nbn-success-message{ flex:1 0 100%;display:block !important;margin:2px 0 0 34px !important; font-size:14px !important;color:rgba(255,255,255,.8) !important; -webkit-text-fill-color:rgba(255,255,255,.8) !important} html body .uc-body .nbn-qualification-success .nbn-success-message:empty{display:none !important} html body .uc-body .nbn-qualification-success > p:last-child{ display:block !important;margin:0 0 0 auto !important;flex:0 0 auto} html body .uc-body .nbn-qualification-success .nbn-view-plans-button br{display:none !important} html body .uc-body .nbn-qualification-success .nbn-view-plans-button::before, html body .uc-body .nbn-qualification-success .nbn-view-plans-button::after{display:none !important;content:none !important} html body .uc-body .nbn-qualification-success .nbn-view-plans-button{ height:44px !important;padding:0 22px !important;font-size:13.5px !important; margin:0 !important;display:inline-flex !important;align-items:center;gap:8px; background:var(--grad) !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important; border:0 !important;border-radius:99px !important;box-shadow:none !important;white-space:nowrap} /* .nbn-success-message ships containing one space, so :empty never matches and the plugin's own border + ::before tick painted it as an empty orange box. Strip the box; when the plugin fills it with text it reads as a plain line. */ html body .uc-body .nbn-qualification-success .nbn-success-message{ background:transparent !important;border:0 !important;padding:0 !important; border-radius:0 !important;box-shadow:none !important;min-height:0 !important} html body .uc-body .nbn-qualification-success .nbn-success-message::before, html body .uc-body .nbn-qualification-success .nbn-success-message::after{display:none !important;content:none !important} /* ---- C. Section kickers = .kick ---- The small line above each section heading ("NBN for Entertainment", "nbn® features", "Contact Us", "Frequently Asked Questions") is an H5 the page builder renders at 13px white. On the homepage that role is .kick: 11.5px, heavy, tracked, uppercase, orange. */ .uc-body h5.wp-block-kadence-advancedheading, .uc-body h6.wp-block-kadence-advancedheading{ font-size:11.5px !important;font-weight:800 !important;letter-spacing:.16em !important; text-transform:uppercase !important;line-height:1.3 !important; color:var(--orange) !important;-webkit-text-fill-color:var(--orange) !important; margin:0 0 14px !important;background:none !important} /* Orange on off-white is ~3:1 and fails AA for text; the light bands use the same substitution the speed matrix already does. */ .uc-body .kb-row-layout-wrap:has(.gt-speed-section) h5.wp-block-kadence-advancedheading, .uc-body .kb-row-layout-wrap:has(.nbn-plans-display) h5.wp-block-kadence-advancedheading{ color:#b34400 !important;-webkit-text-fill-color:#b34400 !important} /* ---- D. Value strip = .trust ---- Pay your way / Weekly, fortnightly & monthly / No lock-in / Aussie-owned is the homepage's trust row: a 6px teal dot and 12.5px text, no icon tiles. The yellow tiles with an orange shadow were the old design's version of the same thing. */ .uc-body .gt-valuestrip{padding-block:18px 24px !important} .uc-body .gt-valuestrip__row{gap:10px 22px} .uc-body .gt-vs-item{ font-size:12.5px;font-weight:600;color:rgba(255,255,255,.66);gap:0} .uc-body .gt-vs-item::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:99px; background:var(--teal);margin-right:8px;vertical-align:middle;flex:0 0 auto} .uc-body .gt-vs-ic{display:none !important} /* ---- E. Progress steps = the order page's .stp stepper ---- A numbered 27px circle and a label, no pill chrome; the active step's circle is orange and its label full-white, the rest sit back. */ body .uc-body .nbn-progress-steps{gap:8px 28px !important;margin:0 0 26px !important} body .uc-body .nbn-step{ background:transparent !important;border:0 !important;padding:0 !important; gap:10px !important;height:auto !important;border-radius:0 !important} body .uc-body .nbn-step p{margin:0 !important;padding:0 !important;line-height:1} body .uc-body .nbn-step-circle{ width:27px !important;height:27px !important;font-size:12px !important; background:rgba(255,255,255,.1) !important;color:rgba(255,255,255,.72) !important} body .uc-body .nbn-step-circle span{color:inherit !important;-webkit-text-fill-color:inherit !important} body .uc-body .nbn-step-label{ font-size:12.5px !important;font-weight:800 !important;letter-spacing:.01em; color:rgba(255,255,255,.5) !important;-webkit-text-fill-color:rgba(255,255,255,.5) !important} body .uc-body .nbn-step.active{background:transparent !important;border:0 !important} body .uc-body .nbn-step.active .nbn-step-circle{background:var(--orange) !important;color:var(--ink) !important} body .uc-body .nbn-step.active .nbn-step-label{ color:var(--off) !important;-webkit-text-fill-color:var(--off) !important} /* The checker subtitle ships with letter-spacing:-1.2px, which at 15px reads as cramped and cheap next to the heading. Homepage body copy is untracked. */ body .uc-body .nbn-search-subtitle{letter-spacing:0 !important;font-weight:500 !important;line-height:1.55 !important} /* .nbn-results-container keeps a 48px top margin even while everything inside it is hidden, so every page carried 48px of nothing under the checker. The panel inside supplies its own spacing when the plugin reveals it. */ html body .uc-body .nbn-results-container{margin:0 !important;padding:0 !important} html body .uc-body .nbn-results-container:empty{display:none} /* ============================================================ 18. Page-by-page pass ------------------------------------------------------------ Findings from screenshotting all seventeen pages at 1440 after the parity pass. Each block names the page it was found on. ============================================================ */ /* ---- A. Checker card boilerplate (every page with a checker) ---- The plugin's card opens with a three-line "Great internet. / No fuss. / More rewards." headline plus a sentence of trust claims — the SAME text on all 14 pages, printed directly under each page's own H1 and lead. Two stacked headline blocks read as two heroes. The theme's hero already carries those claims (kicker, H1, lead, trust row), so the card is reduced to what the homepage form is: steps, field, button, trust points. This hides plugin boilerplate, not page content. It is one rule; delete it to restore the headline. */ body .uc-body .nbn-search-heading h1, body .uc-body .nbn-search-heading .nbn-search-subtitle{display:none !important} body .uc-body .nbn-search-heading{margin:0 !important} body .uc-body .nbn-search-main-card{padding:clamp(24px,2.6vw,36px) !important} /* ---- B. Trust strip attaches to the hero (every page) ---- The homepage trust row sits right under the address form. Here it was floating in its own band, 68px below the card, under a divider line. */ .uc-body .kb-row-layout-wrap:has(.nbn-address-search){padding-bottom:22px !important} .uc-body > .gt-valuestrip{border-top:0 !important;padding-block:0 40px !important} /* ---- C. Kickers only where a heading follows (AI & Code Development) ---- That page uses H5 for full descriptive sentences under its column headings, which the blanket kicker rule set in 11px orange uppercase. A kicker is an H5 immediately followed by a heading; any other H5/H6 is a short lead. */ .uc-body h5.wp-block-kadence-advancedheading:not(:has(+ h1, + h2, + h3)), .uc-body h6.wp-block-kadence-advancedheading:not(:has(+ h1, + h2, + h3)){ font-size:15px !important;font-weight:500 !important;letter-spacing:0 !important; text-transform:none !important;line-height:1.55 !important; color:rgba(255,255,255,.74) !important;-webkit-text-fill-color:rgba(255,255,255,.74) !important; margin:0 0 14px !important} /* ---- E. Plain (non-Kadence) content lane (FIFO Workers) ---- A page whose body is classic markup has no rows, so every paragraph was a direct child of the lane and picked up a section's worth of block padding — 40px above and below each

— while the list, which zeroes its own padding, fell out of the gutter entirely. Direct children keep the inline gutter and get paragraph spacing instead; the lane's top and bottom padding lives on the first and last child only. */ .uc-body > *:not(.kb-row-layout-wrap):not(.gt-valuestrip){padding-block:0} .uc-body > p,.uc-body > ul,.uc-body > ol,.uc-body > blockquote{margin:0 0 18px} .uc-body > p{max-width:calc(74ch + 2 * clamp(20px,5vw,56px))} .uc-body > h2{margin:44px 0 14px} .uc-body > h3{margin:32px 0 10px} .uc-body > h2:first-child,.uc-body > h3:first-child{margin-top:0} .uc-body > ul:not([class]),.uc-body > ol:not([class]){padding-inline:clamp(20px,5vw,56px)} .uc-body > :first-child:not(.kb-row-layout-wrap):not(.gt-valuestrip){padding-top:52px} .uc-body > :last-child:not(.kb-row-layout-wrap):not(.gt-valuestrip){padding-bottom:64px} .uc-body > .kb-row-layout-wrap ~ p,.uc-body > .kb-row-layout-wrap ~ h2, .uc-body > .kb-row-layout-wrap ~ h3,.uc-body > .kb-row-layout-wrap ~ ul{border-top:0} /* ---- F. Images beside text (the "Ready to get connected?" rows, Entertainment Streaming's two feature rows) ---- The parrot cut-outs are 1024px squares dropped into a half-width column and read as oversized clip-art. The homepage's .sup image caps at 420px. */ .uc-body .kt-has-2-columns figure, .uc-body .kt-has-2-columns .wp-block-image{margin:0;text-align:center} .uc-body .kt-has-2-columns figure img, .uc-body .kt-has-2-columns .wp-block-image img{ max-width:440px !important;width:100% !important;height:auto !important; display:block;margin-inline:auto} .uc-body .kt-has-2-columns > .wp-block-kadence-column:has(figure){align-self:center} /* ---- G. Hub groups of five (NBN For You hub) ---- 1168px of lane divided by five is 233px, just under the tile minimum, so the fifth tile dropped alone onto a second row. */ .uc-hub-group .tiles{grid-template-columns:repeat(auto-fit,minmax(214px,1fr))} /* .nbn-address-search-container keeps 48px of block padding and the card a 50px drop shadow from the plugin; together they painted a faint halo band above and below the card. The homepage form has neither. */ html body .uc-body .nbn-address-search-container{padding:0 !important;margin:0 !important} html body .uc-body .nbn-search-main-card{box-shadow:none !important} /* Kadence button blocks centre their wrapper, so "Sign Up Today" sat centred under left-aligned copy; and the block's own size class outranked the theme button's type size. Left-aligned and sized to .btn, like the homepage CTAs. */ .uc-body .wp-block-kadence-advancedbtn, .uc-body .kb-buttons-wrap, .uc-body .kt-btn-wrap{text-align:left !important;justify-content:flex-start !important;display:flex !important;flex-wrap:wrap;gap:10px;margin:22px 0 0 !important} .uc-body .kb-button,.uc-body a.kb-button,.uc-body .kt-button{ font-size:14px !important;line-height:1.2 !important;height:auto !important;min-height:0 !important} /* Icons inside Kadence buttons ride inline with the label, like the arrow in the theme's own "Check Availability →". The button wrapper also needs space below it: Entertainment Streaming uses a button block as a kicker pill above its H1, and with margin only above, the pill touched the heading. */ .uc-body .kb-button .kb-svg-icon-wrap, .uc-body .kb-button .kt-btn-svg-icon{display:inline-flex !important;width:auto !important;height:auto !important; background:transparent !important;border-radius:0 !important;margin:0 !important;padding:0 !important} .uc-body .kb-button .kb-svg-icon-wrap svg, .uc-body .kb-button svg{width:16px !important;height:16px !important;color:currentColor !important;fill:currentColor} .uc-body .wp-block-kadence-advancedbtn, .uc-body .kb-buttons-wrap{margin:22px 0 20px !important} /* ============================================================ 19. Client-ready polish pass ============================================================ */ /* ---- Button label centring ---- The plugin's buttons open with a
("