/* ============================================================= FTTH Website — Main Stylesheet File: css/ftth_style.css Fonts: Asap (Google Fonts, loaded in ) Images: Hero background → ../images/hero-bg.jpg ============================================================= */ /* ───────────────────────────────────────────────────────────── 1. DESIGN TOKENS ───────────────────────────────────────────────────────────── */ :root { /* Brand */ --red: #E8001D; --red-dark: #C20019; --red-glow: rgba(232, 0, 29, 0.16); /* Neutrals */ --black: #0A0A0A; --off-black: #151515; --dark: #1C1C2E; --muted: #68707C; --border: #E4E6EA; --bg: #FFFFFF; --soft: #F7F8FB; --soft-2: #EEF0F5; /* Typography */ --font: 'Asap', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; /* Spacing scale (8-pt grid) */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 48px; --sp-6: 64px; --sp-7: 80px; --sp-8: 96px; /* Radii */ --r-sm: 10px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px; /* Shadows */ --sh-sm: 0 2px 8px rgba(0,0,0,.06); --sh-md: 0 6px 18px rgba(0,0,0,.08); --sh-lg: 0 12px 30px rgba(0,0,0,.10); --sh-red: 0 8px 20px rgba(232,0,29,.20); /* Easing */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* Transition presets */ --t-fast: .16s ease; --t-base: .26s ease; --t-slow: .44s var(--ease-out); } html, body { background: #ffffff !important; } /* ───────────────────────────────────────────────────────────── 2. RESET & BASE ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--off-black); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5 { line-height: 1.1; font-weight: 800; } img, video, iframe { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ───────────────────────────────────────────────────────────── 3. LAYOUT UTILITIES ───────────────────────────────────────────────────────────── */ .container { width: min(1200px, 92%); margin-inline: auto; } section { padding: var(--sp-7) 0; } /* ───────────────────────────────────────────────────────────── 4. HERO ───────────────────────────────────────────────────────────── */ .hero { width: 100%; height: 450px; position: relative; overflow: hidden; background: url('../images/fttphero.png') center center / cover no-repeat; } /* readability overlay (keep yours or this improved one) */ .hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,.10) 65%, rgba(0,0,0,0) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 680px; padding: 5px 0 60px; } /* Pill badge above headline */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.24); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .hero h1 { font-size: clamp(27px, 5vw, 57px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin: 18px 0 16px; color: #fff; margin-bottom: 18px; } .hero > .container > .hero-content > p { font-size: 16.5px; line-height: 1.45; font-weight: 400; color: rgba(255,255,255,.80); max-width: 500px; margin-top: 8px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: var(--sp-4); } .hero-actions .btn { font-size: 14px; font-weight: 700; letter-spacing: 0.2px; padding: 8px 16px; } /* ───────────────────────────────────────────────────────────── 5. BUTTONS ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: var(--r-pill); font-family: var(--font); font-size: 13px; font-weight: 700; border: 2px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--t-base), color var(--t-base), border-color var(--t-base), box-shadow var(--t-base), transform var(--t-slow); } .btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; } /* Primary — solid red */ .btn-primary { background: var(--red); color: #fff; box-shadow: var(--sh-red); } .btn-primary:hover { background: var(--red-dark); box-shadow: 0 18px 44px rgba(232,0,29,.40); transform: translateY(-3px); } .btn-primary:active { transform: translateY(0); box-shadow: var(--sh-red); } /* Secondary — ghost / frosted */ .btn-secondary { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .btn-secondary:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.90); transform: translateY(-3px); } .btn-secondary:active { transform: translateY(0); } /* ───────────────────────────────────────────────────────────── 6. SECTION TITLES ───────────────────────────────────────────────────────────── */ .section-title { text-align: center; margin-bottom: var(--sp-5); } .section-title h2 { font-size: 2.3rem; font-weight: 650; color: var(--red); margin: 8px; } .section-title p { margin: 14px auto 0; font-size: clamp(12px, 1.5vw, 16px); color: var(--muted); max-width: 520px; line-height: 1.6; } /* ───────────────────────────────────────────────────────────── 7. PLANS ───────────────────────────────────────────────────────────── */ .plans { background: #ffffff; } .plan-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: start; } /* ── Base card ── */ .plan-card { position: relative; background: var(--bg); border: 1.4px solid #D1D5DB; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* border: 1.5px solid var(--border); */ border-radius: var(--r-lg); padding: 24px 18px 20px; display: flex; flex-direction: column; min-height: 270px; transition: transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-base); display: flex; flex-direction: column; align-items: center; text-align: center; } .plan-card:hover { transform: translateY(-10px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10); border-color: var(--red); z-index: 2; } /* Speed label */ .plan-speed { font-size: clamp(24px, 2.5vw, 30px); margin-bottom: 10px; font-weight: 800; color: var(--red); padding-top: 2px; } .plan-speed, .vat { width: 100%; text-align: center; } .plans { background:#ffffff; } .vat { color: rgba(10, 10, 10, 0.35); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } #plans { scroll-margin-top: 50px; } #availability { scroll-margin-top: 100px; } /* Price */ .plan-price { font-size: clamp(34px, 3vw, 42px); font-weight: 750; line-height: 1; letter-spacing: -.02em; display: flex; justify-content: center; align-items: baseline; gap: 6px; text-align: center; } .plan-price span { font-size: 16px; font-weight: 600; color: var(--muted); margin-right: 4px; letter-spacing: 0; } .vat { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 5px 0 var(--sp-3); } /* Data volume chip */ .volume { background: #E3E7ED; border: 1px solid #D2D7DF; border-radius: 10px; padding: 8px 10px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; } /* CTA button inside card */ .plan-btn { display: inline-flex; align-items: center; justify-content: center; width: 85%; height: 40px; padding: 0 18px; font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.2px; text-transform: none; border-radius: var(--r-pill); background: var(--off-black); color: #fff; margin-top: auto; text-decoration: none; transition: all var(--t-base); } .plan-btn:hover { background: var(--red); box-shadow: var(--sh-red); transform: translateY(-2px); } .plan-btn:active { transform: translateY(0); } /* ───────────────────────────────────────────────────────────── 8. AVAILABILITY CHECKER ───────────────────────────────────────────────────────────── */ .availability-result.show{ display:block; } .highlight-location { color: var(--red); font-weight: 700; } .select-wrap { position: relative; width: 100%; } /* select */ .select-wrap select { width: 100%; padding: 14px 52px 14px 16px; font-family: var(--font); font-size: 16px; font-weight: 600; border: 1.5px solid #D7DCE3; border-radius: 12px; background: #F7F9FB; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; } /* FULL arrow (like your image) */ .select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat center; background-size: 22px 22px; pointer-events: none; } .location-label { display: block; text-align: center; margin-bottom: 14px; font-size: 17px; font-weight: 500; color: var(--off-black); } .label-inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .label-icon { width: 25px !important; height: 25px !important; max-width: 25px !important; max-height: 25px !important; flex: 0 0 25px; object-fit: contain; display: inline-block; line-height: 1; transform: translateY(-3.6px); } .lead-form.hide { display: none; } /* ───────────────────────────────────────────────────────────── 9. MAP + LEAD FORM SECTION ───────────────────────────────────────────────────────────── */ .map-section { background:#fff; } .availability-row { display:flex; flex-wrap:wrap; align-items:stretch; gap:32px; width:100%; } /* LEFT SIDE - FORM */ .availability-result { display: flex; flex:0.9; width:45%; background:#fff; border:1.5px solid var(--border); border-radius:22px; display:flex; flex-direction:column; animation:fadeSlideUp .35s ease; padding: 26px 32px; height: 700px; } .availability-result h3 { text-align:center; font-size:27px; font-weight:700; color:#111; margin-bottom:10px; } .lead-text { text-align:center; color:#666; font-size:15px; margin-bottom:28px; line-height:1.5; } #selectedLocation { color:var(--red); font-weight:700; } /* ========================================== DEFAULT (Existing locations) ========================================== */ .lead-form { display:flex; flex-direction:column; flex:1; min-height:0; } .form-fields { display: flex; flex: 1; flex-direction: column; gap: 14px !important; height: 100%; } .form-group { display: flex; flex-direction: column; gap: 8.5px; flex: none; } .form-group label { font-size:15px; font-weight:600; color:#333; margin:0; } .form-group input { width:100%; height:52px; padding:0 14px; font-family:var(--font); font-size:14px; border:1.5px solid #D7DCE3; border-radius:12px; background:#fff; transition:.25s; gap:8px; } .form-group input::placeholder { color:#9AA1AC; font-weight:400; } .form-group input:focus { outline: none; border-color: #6B7280; background: #fff; box-shadow: none; } .form-group input:focus, .form-group input:valid { border-color: #D7DCE3; background: #F7F8FB; box-shadow: none; } .form-group input:-webkit-autofill, .form-group input:-webkit-autofill:hover, .form-group input:-webkit-autofill:focus, .form-group input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px #F7F8FB inset !important; -webkit-text-fill-color: #111 !important; border-color: #D7DCE3 !important; } .register-btn { width: 100%; height: 46px; margin-top: 6px; transform: translateY(0); border: none; border-radius: 999px; background: linear-gradient(135deg, #E8001D, #C7001A); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; transition: .25s; } .register-btn:hover { transform: translateY(-2px); } .register-btn:active { transform: translateY(0); } /* ========================================== COMPACT (Others) ========================================== */ .availability-result.compact-form .form-fields{ gap:12px; } .availability-result.compact-form .form-group{ gap:4px; } .availability-result.compact-form .form-group input{ height:46px; } .availability-result.compact-form { transform: translateY(6px); } /* RIGHT SIDE - MAP */ .map-title { margin-bottom: var(--sp-5); } .map-wrap { flex:1.1; width:55%; height:600px; overflow:hidden; border-radius:22px; background: var(--soft); background-color: #e1e1e1; display: flex; align-items: center; justify-content: center; } .map-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; } .availability-result, .map-wrap { min-height: 700px; } /* SUCCESS MESSAGE */ .success-message { text-align: center; padding: 50px 20px; background: #fff; border-radius: 15px; margin: 40px auto; } .success-icon { width:55px; height:55px; margin:0 auto 18px; border-radius:50%; background:#2ecc71; color:#fff; font-size:30px; line-height:55px; } /* MOBILE */ @media(max-width:900px){ .availability-row { flex-direction:column; } .availability-result, .map-wrap { width:100%; height:auto; min-height:500px; } .map-wrap img { min-height:500px; } } /* ───────────────────────────────────────────────────────────── 10. PREMIUM TV — CTA BAND ───────────────────────────────────────────────────────────── */ .tv-cta-section { background: var(--bg); } .cta-band { position: relative; background: #000; color: #fff; border-radius: var(--r-xl); padding: 64px 56px; text-align: center; overflow: hidden; } .cta-band::before { display: none; } .cta-band::after { display: none; } /* Keep all children above the glows */ .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size:2.3rem; font-weight: 650; color: #fff; margin-bottom: 12px; } .cta-band .cta-lead { font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: rgba(255,255,255,.90); margin-bottom: 14px; } .cta-band p { font-size: clamp(13px, 1.3vw, 15px); color: rgba(255,255,255,.72); max-width: 560px; margin-inline: auto; line-height: 1.7; } a.canal-link { color: #ffffff; font-weight: 650; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } a.canal-link:hover { opacity: 0.50; } /* ───────────────────────────────────────────────────────────── 11. BUILDING PARTNER ───────────────────────────────────────────────────────────── */ .building-partner { background: #FFFFFF; /* pure white */ text-align: center; } .building-partner .container { max-width: 740px; } .building-partner h2 { font-size: 2.3rem; font-weight: 650; color: var(--off-black); margin-bottom: 14px; } .building-partner p { font-size: 15px; /* was 16px */ color: var(--muted); line-height: 1.7; margin-bottom: 10px; } .building-contact strong { font-size: 16px; } .building-contact a { color: var(--red); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast); } .building-contact a:hover { color: var(--red-dark); } /* ───────────────────────────────────────────────────────────── 12. SCROLL-TRIGGERED ANIMATIONS ───────────────────────────────────────────────────────────── */ .animate-in { opacity: 0; transform: translateY(28px); transition: opacity .60s var(--ease-out), transform .60s var(--ease-out); } .animate-in.is-visible { opacity: 1; transform: translateY(0); } /* Stagger plan cards */ .plan-grid .animate-in:nth-child(1) { transition-delay: .04s; } .plan-grid .animate-in:nth-child(2) { transition-delay: .10s; } .plan-grid .animate-in:nth-child(3) { transition-delay: .16s; } .plan-grid .animate-in:nth-child(4) { transition-delay: .22s; } .plan-grid .animate-in:nth-child(5) { transition-delay: .28s; } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ───────────────────────────────────────────────────────────── 13. RESPONSIVE BREAKPOINTS Strategy: large desktop → tablet → mobile → small mobile ───────────────────────────────────────────────────────────── */ /* Tablet landscape / small desktop (≤ 1120px) */ @media (max-width: 1120px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } /* Last two cards share the second row */ .plan-card--featured, .plan-card--premium { grid-column: auto; } } /* Tablet portrait (≤ 820px) */ @media (max-width: 820px) { section { padding: var(--sp-6) 0; } .hero { min-height: 580px; } .hero-content { padding: var(--sp-7) 0 var(--sp-6); } .plan-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .checker { padding: 32px 28px; } .cta-band { padding: 52px 36px; } .map-wrap img { height: 380px; } } /* Mobile (≤ 600px) */ @media (max-width: 600px) { section { padding: var(--sp-5) 0; } .hero { min-height: 520px; } .hero-content { padding: var(--sp-6) 0; max-width: 100%; } .hero h1 { font-size: clamp(36px, 10vw, 50px); } .hero-actions { flex-direction: column; align-items: stretch; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-pill); } .hero-actions { gap: 10px; margin-top: 28px; } .plan-grid { grid-template-columns: 1fr; gap: 14px; } /* Re-show featured / premium at full width */ .plan-card--featured::before, .plan-card--premium::before { font-size: 9px; padding: 4px 12px; } .section-title { margin-bottom: var(--sp-4); } .checker { padding: 24px 20px; border-radius: var(--r-lg); } .availability-cta { flex-direction: column; } .availability-cta a { width: 100%; justify-content: center; } .map-wrap img { height: 300px; } .cta-band { padding: 44px 24px; border-radius: var(--r-lg); } } /* Small mobile (≤ 400px) */ @media (max-width: 400px) { .hero h1 { font-size: 34px; } .plan-price { font-size: 38px; } .checker { padding: 20px 16px; } } /* ───────────────────────────────────────────────────────────── 14. ACCESSIBILITY — reduced motion ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .animate-in { opacity: 1; transform: none; } } /* ───────────────────────────────────────────────────────────── 15. PRINT ───────────────────────────────────────────────────────────── */ @media print { .hero { min-height: auto; background: none; color: var(--off-black); padding: 24px 0; } .hero h1 { color: var(--off-black); } .hero p { color: var(--off-black); } .eyebrow { border-color: var(--border); color: var(--off-black); background: none; } .hero-actions, .map-wrap { display: none; } .plan-card { box-shadow: none; border: 1px solid var(--border); } .plan-card--premium { background: var(--soft); color: var(--off-black); } } /* Tablet/mobile */ @media (max-width: 900px) { .availability-row { flex-direction: column; } } /* mobile responsive */ @media (max-width: 900px) { .availability-row { flex-direction: column; } } .hidden { display: none !important; } /* ===================================================== LOCATION DROPDOWN INSIDE FORM CARD ===================================================== */ .form-location { margin-bottom: 25px; } .form-location .location-label { display:flex; align-items:center; justify-content:center; gap:10px; font-size:15px; font-weight:600; color:#333; margin-bottom:14px; } .form-location .label-icon { width:25px !important; height:25px !important; object-fit:contain; transform:none; } /* Dropdown wrapper */ .form-location .select-wrap { position:relative; width:100%; } /* Dropdown */ .form-location .select-wrap select { width:100%; height:52px; padding:0 50px 0 16px; font-family:var(--font); font-size:14px; font-weight:600; color:#333; background:#F7F9FB; border:1.5px solid #D7DCE3; border-radius:12px; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; transition:.25s; } /* Arrow */ .form-location .select-wrap::after { content:""; position:absolute; right:16px; top:50%; transform:translateY(-50%); width:25px; height:25px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23666' d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat center; background-size:22px; pointer-events:none; } .form-location select:focus { outline:none; border-color:#BFC5CC; background:#fff; } .availability-result .lead-form { margin-top:10px; } .form-group .location-label { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 14px; text-align: center; } .form-group .label-inner { display: inline-flex; align-items: center; justify-content: center; gap: 2px; } .form-group .label-icon { width: 25px; height: 25px; object-fit: contain; transform: translateY(-1px); } #locationSelect { border: 1px solid #555 !important; background: #ECEEF2 !important; } #locationSelect:focus { outline: none; border: 1px solid #333 !important; box-shadow: none; } /* Title */ .availability-result h3 { font-size: 25px; margin-bottom: 14px; } /* Location section */ .location-dropdown .location-label { margin-bottom: 8px; font-size: 14px; } .location-dropdown select { height: 44px !important; font-size: 14px; } /* Labels */ .form-group label { font-size: 14px; } /* Inputs */ .form-group input { height: 44px; font-size: 14px; } /* Address */ #addressField input { height: 44px; } /* Button stays inside */ .register-btn { height: 46px; margin-top: 6px; transform: none; } .plan-toggle { display: flex; justify-content: center; margin-top: 20px; gap: 6px; } .toggle-btn { border: 1px solid #e30613; background: #ffffff; color: #e30613; padding: 7px 24px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all .3s ease; } .toggle-btn:hover { background: #e30613; color: white; } .toggle-btn.active { background: #e30613; color: white; border-color: #e30613; } .form-fields.expanded{ justify-content:space-between; } .form-fields:not(.expanded) { justify-content: flex-start; } .lead-form { flex: 1; } #nsldPlans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto; } #nsldPlans .plan-card:nth-child(1) { grid-column: 2; } #nsldPlans .plan-card:nth-child(2) { grid-column: 3; } #nsldPlans .plan-card:nth-child(3) { grid-column: 4; } .form-fields.expanded { justify-content: space-between; gap: 0; } .form-fields:not(.expanded) { justify-content: flex-start; gap: 10px; }