.tga-fibre-page {
--fibre-green: #174b3a;
--fibre-green-dark: #10372b;
--fibre-green-soft: #edf5f1;
--fibre-gold: #f2c75c;
--fibre-orange: #ff9f1c;
--fibre-red: #9f4038;
--fibre-blue: #286783;
--fibre-text: #252b29;
--fibre-muted: #59635f;
--fibre-border: #d8e2dd;
--fibre-white: #ffffff;
overflow: hidden;
width: 100%;
color: var(--fibre-text);
background: var(--fibre-white);
font-family: Tahoma, Arial, sans-serif;
font-size: 17px;
line-height: 1.72;
}
.tga-fibre-page,
.tga-fibre-page * {
box-sizing: border-box;
}
.tga-fibre-page h1,
.tga-fibre-page h2,
.tga-fibre-page h3,
.tga-fibre-page p,
.tga-fibre-page figure,
.tga-fibre-page dl,
.tga-fibre-page dd {
margin-top: 0;
}
.tga-fibre-page h1,
.tga-fibre-page h2,
.tga-fibre-page h3 {
color: var(--fibre-green-dark);
line-height: 1.27;
}
.tga-fibre-page h1 {
margin-bottom: 20px;
font-size: clamp(36px, 5vw, 56px);
letter-spacing: -0.025em;
}
.tga-fibre-page h2 {
margin-bottom: 14px;
font-size: clamp(27px, 3.4vw, 40px);
}
.tga-fibre-page h3 {
margin-bottom: 10px;
font-size: 22px;
}
.tga-fibre-page a {
color: inherit;
}
.tga-fibre-page img {
display: block;
max-width: 100%;
height: auto;
}
.tga-fibre-container {
width: min(1120px, calc(100% - 40px));
margin-right: auto;
margin-left: auto;
}
.tga-fibre-hero {
padding: 66px 0;
color: #ffffff;
background: linear-gradient(135deg, var(--fibre-green-dark), var(--fibre-green));
}
.tga-fibre-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
gap: 52px;
align-items: center;
}
.tga-fibre-kicker,
.tga-fibre-label {
display: inline-flex;
align-items: center;
margin-bottom: 16px;
color: var(--fibre-green);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.tga-fibre-kicker {
padding: 6px 13px;
color: #ffffff;
text-transform: none;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 999px;
}
.tga-fibre-hero h1 {
color: #ffffff;
}
.tga-fibre-lead {
max-width: 710px;
margin-bottom: 26px;
color: rgba(255, 255, 255, 0.9);
font-size: 19px;
}
.tga-fibre-actions {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin-bottom: 25px;
}
.tga-fibre-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 11px 19px;
color: #ffffff;
font-weight: 800;
line-height: 1.35;
text-align: center;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 7px;
}
.tga-fibre-button-primary {
color: var(--fibre-green-dark);
background: var(--fibre-gold);
border-color: var(--fibre-gold);
}
.tga-fibre-button-line {
background: transparent;
}
.tga-fibre-button-phone {
color: var(--fibre-green-dark);
background: var(--fibre-orange);
border-color: var(--fibre-orange);
}
.tga-fibre-button:hover,
.tga-fibre-button:focus-visible {
filter: brightness(0.95);
}
.tga-fibre-proof {
display: flex;
flex-wrap: wrap;
gap: 8px 19px;
margin: 0;
padding: 0;
color: rgba(255, 255, 255, 0.88);
font-size: 14px;
font-weight: 700;
list-style: none;
}
.tga-fibre-proof li::before {
margin-right: 7px;
color: var(--fibre-gold);
content: "✓";
}
.tga-fibre-hero-media {
overflow: hidden;
margin: 0;
background: #f3f0eb;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 13px;
}
.tga-fibre-hero-media img {
width: 100%;
aspect-ratio: 640 / 420;
object-fit: cover;
}
.tga-fibre-section {
padding: 70px 0;
}
.tga-fibre-section-alt {
background: #f7f9f8;
}
.tga-fibre-intro {
max-width: 800px;
margin-bottom: 32px;
}
.tga-fibre-intro p {
margin-bottom: 0;
color: var(--fibre-muted);
}
.tga-fibre-quick-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.tga-fibre-quick-item {
padding: 21px;
background: #ffffff;
border: 1px solid var(--fibre-border);
border-radius: 9px;
}
.tga-fibre-quick-item strong,
.tga-fibre-quick-item span {
display: block;
}
.tga-fibre-quick-item strong {
margin-bottom: 6px;
color: var(--fibre-green-dark);
font-size: 18px;
}
.tga-fibre-quick-item span {
color: var(--fibre-muted);
font-size: 15px;
}
.tga-fibre-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.tga-fibre-type-card {
overflow: hidden;
background: #ffffff;
border: 1px solid var(--fibre-border);
border-radius: 11px;
}
.tga-fibre-type-head {
display: flex;
align-items: center;
gap: 17px;
padding: 24px 26px;
color: #ffffff;
}
.tga-fibre-type-card.is-red .tga-fibre-type-head {
background: var(--fibre-red);
}
.tga-fibre-type-card.is-blue .tga-fibre-type-head {
background: var(--fibre-blue);
}
.tga-fibre-disc-icon {
position: relative;
flex: 0 0 70px;
width: 70px;
height: 70px;
background: rgba(255, 255, 255, 0.16);
border: 2px solid rgba(255, 255, 255, 0.72);
border-radius: 50%;
}
.tga-fibre-disc-icon::after {
position: absolute;
top: 50%;
left: 50%;
width: 15px;
height: 15px;
background: #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
content: "";
}
.tga-fibre-type-head h3,
.tga-fibre-type-head p {
margin: 0;
color: #ffffff;
}
.tga-fibre-type-head h3 {
font-size: 25px;
}
.tga-fibre-type-head p {
opacity: 0.88;
font-size: 14px;
}
.tga-fibre-type-body {
padding: 27px;
}
.tga-fibre-type-body > p {
margin-bottom: 20px;
color: var(--fibre-muted);
}
.tga-fibre-spec-list {
margin: 0;
}
.tga-fibre-spec-list div {
display: grid;
grid-template-columns: 118px 1fr;
gap: 13px;
padding: 10px 0;
border-top: 1px solid var(--fibre-border);
}
.tga-fibre-spec-list dt {
color: var(--fibre-green-dark);
font-weight: 800;
}
.tga-fibre-spec-list dd {
margin-bottom: 0;
color: var(--fibre-muted);
}
.tga-fibre-table-wrap {
overflow-x: auto;
border: 1px solid var(--fibre-border);
border-radius: 10px;
}
.tga-fibre-table {
width: 100%;
min-width: 720px;
border-collapse: collapse;
background: #ffffff;
}
.tga-fibre-table th,
.tga-fibre-table td {
padding: 15px 17px;
text-align: left;
vertical-align: top;
border-bottom: 1px solid var(--fibre-border);
}
.tga-fibre-table th {
color: #ffffff;
background: var(--fibre-green-dark);
font-size: 15px;
}
.tga-fibre-table tr:last-child td {
border-bottom: 0;
}
.tga-fibre-table td:first-child {
color: var(--fibre-green-dark);
font-weight: 800;
}
.tga-fibre-application-grid,
.tga-fibre-step-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 15px;
}
.tga-fibre-application,
.tga-fibre-step {
padding: 23px;
background: #ffffff;
border: 1px solid var(--fibre-border);
border-radius: 9px;
}
.tga-fibre-application h3,
.tga-fibre-step h3 {
font-size: 18px;
}
.tga-fibre-application p,
.tga-fibre-step p {
margin-bottom: 0;
color: var(--fibre-muted);
font-size: 15px;
}
.tga-fibre-step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-bottom: 14px;
color: var(--fibre-green-dark);
background: var(--fibre-green-soft);
border-radius: 50%;
font-size: 14px;
font-weight: 800;
}
.tga-fibre-quote-box {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
gap: 35px;
padding: 38px;
color: #ffffff;
background: var(--fibre-green-dark);
border-radius: 12px;
}
.tga-fibre-quote-box h2,
.tga-fibre-quote-box h3 {
color: #ffffff;
}
.tga-fibre-quote-box p {
color: rgba(255, 255, 255, 0.84);
}
.tga-fibre-checklist {
margin: 0;
padding-left: 21px;
}
.tga-fibre-checklist li {
margin-bottom: 7px;
}
.tga-fibre-example {
padding: 23px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 9px;
}
.tga-fibre-example p:last-child {
margin-bottom: 0;
}
.tga-fibre-faq {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 15px;
}
.tga-fibre-faq-item {
padding: 23px;
background: #ffffff;
border: 1px solid var(--fibre-border);
border-radius: 9px;
}
.tga-fibre-faq-item h3 {
font-size: 18px;
}
.tga-fibre-faq-item p {
margin-bottom: 0;
color: var(--fibre-muted);
}
.tga-fibre-related {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}
.tga-fibre-related a {
padding: 8px 13px;
color: var(--fibre-green-dark);
font-weight: 700;
text-decoration: none;
background: var(--fibre-green-soft);
border-radius: 999px;
}
.tga-fibre-final {
padding: 57px 0;
text-align: center;
color: #ffffff;
background: var(--fibre-green);
}
.tga-fibre-final h2 {
color: #ffffff;
}
.tga-fibre-final p {
max-width: 730px;
margin-right: auto;
margin-bottom: 23px;
margin-left: auto;
color: rgba(255, 255, 255, 0.86);
}
.tga-fibre-final .tga-fibre-actions {
justify-content: center;
margin-bottom: 0;
}
@media (max-width: 900px) {
.tga-fibre-hero-grid,
.tga-fibre-quote-box {
grid-template-columns: 1fr;
}
.tga-fibre-hero-media {
max-width: 680px;
}
.tga-fibre-quick-grid,
.tga-fibre-application-grid,
.tga-fibre-step-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 680px) {
.tga-fibre-container {
width: min(100% - 28px, 1120px);
}
.tga-fibre-hero {
padding: 48px 0;
}
.tga-fibre-section {
padding: 54px 0;
}
.tga-fibre-type-grid,
.tga-fibre-faq {
grid-template-columns: 1fr;
}
.tga-fibre-quote-box {
padding: 27px 22px;
}
}
@media (max-width: 480px) {
.tga-fibre-page {
font-size: 16px;
}
.tga-fibre-page h1 {
font-size: 34px;
}
.tga-fibre-actions,
.tga-fibre-button {
width: 100%;
}
.tga-fibre-quick-grid,
.tga-fibre-application-grid,
.tga-fibre-step-grid {
grid-template-columns: 1fr;
}
.tga-fibre-type-head {
padding: 21px;
}
.tga-fibre-type-body {
padding: 22px;
}
.tga-fibre-spec-list div {
grid-template-columns: 1fr;
gap: 3px;
}
}