/* ========================================================================== TwoLynk — New Homepage Design Drop this in as: public/assets/front/theme3456/css/home-v2.css Load it AFTER custom.css / website-color.css so it wins on specificity. IMPORTANT — scoping: • Rules under `body.tl-home-v2` only affect the homepage. Add the class in your layout: (only on the home view). • The header + footer rules are NOT scoped, because the mockup changes them site-wide. If you want them home-only, prefix them with body.tl-home-v2. ========================================================================== */ :root { --tl-orange: #ff851b; --tl-orange-dark: #e8730d; --tl-ink: #1f2226; --tl-ink-soft: #4a4f57; --tl-cream: #fdf7ee; --tl-line: #e7e3dc; --tl-dark: #26292d; --tl-radius: 6px; --tl-shadow: 0 10px 40px rgba(31, 34, 38, 0.1); } /* ========================================================================== 1. HEADER (.header-area.header_v5) Two bars: cream utility bar (logo + search + auth) and white category nav. ========================================================================== */ .header-area.header_v5 { position: relative; background: var(--tl-cream); box-shadow: 0 1px 0 var(--tl-line); } .header-area.header_v5 .main-navbar { background: var(--tl-cream); padding: 14px 0; } .header-area.header_v5 .main-navbar .navbar { display: flex; align-items: center; gap: 32px; padding: 0; flex-wrap: nowrap; } .header-area.header_v5 .navbar-brand img { height: 46px; width: auto; } /* --- search field ------------------------------------------------------- */ .header-area.header_v5 .header-search-form { flex: 1 1 auto; max-width: 460px; margin: 0 auto; } .header-area.header_v5 .header-search-form > .d-flex { position: relative; background: #fff; border: 1px solid var(--tl-line); border-radius: var(--tl-radius); overflow: hidden; padding-left: 14px; } /* the decorative magnifier that sits inside the field, left */ .header-area.header_v5 .header-search-form > .d-flex > span { display: flex; align-items: center; font-size: 14px; color: #9aa0a6 !important; } .header-area.header_v5 .header-search-form .form-control { border: 0; box-shadow: none; height: 44px; font-size: 14px; color: var(--tl-ink); background: transparent; } .header-area.header_v5 .header-search-form .form-control::placeholder { color: #9aa0a6; } .header-area.header_v5 .header-search-btn { flex: 0 0 46px; height: 44px; border: 0; background: var(--tl-orange); color: #fff; font-size: 15px; cursor: pointer; transition: background 0.2s ease; } .header-area.header_v5 .header-search-btn:hover { background: var(--tl-orange-dark); } /* --- auth links -------------------------------------------------------- */ .header-area.header_v5 .more-option .navbar-nav { display: flex; flex-direction: row; align-items: center; gap: 28px; margin: 0 !important; padding: 0; list-style: none; } .header-area.header_v5 .more-option .nav-item a { font-size: 15px; font-weight: 500; color: var(--tl-ink); white-space: nowrap; transition: color 0.2s ease; } .header-area.header_v5 .more-option .nav-item a:hover { color: var(--tl-orange); } /* --- category nav bar -------------------------------------------------- */ .header-category-nav { background: #fff; border-top: 1px solid var(--tl-line); border-bottom: 1px solid var(--tl-line); } .header-category-nav .category-nav-list { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; } .header-category-nav .category-nav-list > li { flex: 1 1 0; } .header-category-nav .category-nav-list a { display: flex; align-items: center; gap: 10px; padding: 14px 4px; font-size: 14px; font-weight: 500; color: var(--tl-ink); transition: color 0.2s ease; } .header-category-nav .category-nav-list a i { font-size: 17px; color: var(--tl-ink-soft); transition: color 0.2s ease; } .header-category-nav .category-nav-list a:hover, .header-category-nav .category-nav-list a:hover i { color: var(--tl-orange); } /* --- mobile header ----------------------------------------------------- */ .main-responsive-nav { position: relative; display: none; background: var(--tl-cream); padding: 12px 0; } .main-responsive-nav .mrn-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .main-responsive-nav .logo { flex-shrink: 0; line-height: 0; } .main-responsive-nav .logo .navbar-brand { display: inline-block; } .main-responsive-nav .logo .navbar-brand img { display: block; height: 38px; width: auto; } .mrn-search-toggle { flex-shrink: 0; border: 0; background: transparent; color: var(--tl-ink); font-size: 18px; padding: 6px; line-height: 1; cursor: pointer; width: 30px; height: 30px; } .mrn-search-toggle:hover { color: var(--tl-orange); } /* floating search panel Note: header.css has `.header-area .main-responsive-nav > div { display: flex; }` in its own mobile breakpoint, which outranks a plain `.mrn-search-panel` selector (2 classes + 1 type beats 1-2 classes). The extra `.header-area.header_v5` prefix below is required so our show/hide actually wins. */ .header-area.header_v5 .main-responsive-nav > .mrn-search-panel { position: absolute; top: 100%; left: 0; right: 0; display: none; align-items: center; gap: 10px; background: var(--tl-cream); border-top: 1px solid var(--tl-line); box-shadow: 0 14px 28px rgba(20, 22, 26, 0.15); padding: 12px 0; z-index: 1001; } .header-area.header_v5 .main-responsive-nav > .mrn-search-panel.active { display: flex; } .mrn-search-panel .container { display: flex; align-items: center; gap: 10px; } .header-area.header_v5 .mrn-search-panel .header-search-form { flex: 1 1 auto; max-width: none; margin: 0; } /* Color-only override — keep the base theme's block-stacked span layout and `top` offsets intact (header.css uses them to animate the bars into an X via .menu-toggler.active span:nth-child(...)). Changing display/gap here breaks that math, since the closed AND active `top` values are calibrated for plain block-flow stacking, not flexbox. */ .header-area .menu-toggler { flex-shrink: 0; border: 0; background: transparent; cursor: pointer; } .header-area .menu-toggler span { background: var(--tl-orange); } /* ========================================================================== 2. HERO (.hero-banner_v7) ========================================================================== */ body.tl-home-v2 .hero-banner.hero-banner_v7 { position: relative; background-image: var(--hero-bg-desktop); background-repeat: no-repeat; background-position: center right; background-size: cover; min-height: 520px; display: flex; align-items: center; /* room for the steps card that overlaps the bottom edge */ padding: 90px 0 130px; } body.tl-home-v2 .hero-banner_v7 .overlay { position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(20, 22, 26, 0.55) 0%, rgba(20, 22, 26, 0.48) 34%, rgba(20, 22, 26, 0.32) 52%, rgba(20, 22, 26, 0) 74% ); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } body.tl-home-v2 .hero-banner_v7 .container { position: relative; z-index: 2; } body.tl-home-v2 .hero-banner_v7 .banner-content { max-width: 620px; text-align: left; } /* two-tone headline — line 1 ink, line 2 orange */ body.tl-home-v2 .hero-banner_v7 .banner-content .title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(0, 0, 0, 0.3); margin-bottom: 6px; } body.tl-home-v2 .hero-banner_v7 .banner-content .title-accent { display: block; font-size: clamp(40px, 5.2vw, 68px); line-height: 1.15; font-weight: 800; text-transform: uppercase; color: var(--tl-orange); margin-bottom: 22px; text-wrap: balance; } body.tl-home-v2 .hero-banner_v7 .banner-content .text { font-size: 17px; line-height: 1.6; font-weight: 500; color: #fff; max-width: 380px; margin-bottom: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 12px rgba(0, 0, 0, 0.3); } body.tl-home-v2 .hero-cta-group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* squared buttons on the homepage — kills the .rounded-pill radius */ body.tl-home-v2 .hero-cta-group .btn, body.tl-home-v2 .category-card .btn, body.tl-home-v2 .hero-cta-group .btn.rounded-pill, body.tl-home-v2 .category-card .btn.rounded-pill { border-radius: var(--tl-radius) !important; } body.tl-home-v2 .hero-cta-group .btn-primary { background: var(--tl-orange); border-color: var(--tl-orange); color: #fff; font-weight: 600; font-size: 16px; padding: 14px 30px; } body.tl-home-v2 .hero-cta-group .btn-primary:hover { background: var(--tl-orange-dark); border-color: var(--tl-orange-dark); } body.tl-home-v2 .btn-hero-outline { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border-radius: var(--tl-radius); background: transparent; border: 1.5px solid #fff; color: #fff; font-weight: 600; font-size: 16px; transition: background 0.2s ease; } body.tl-home-v2 .btn-hero-outline:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } body.tl-home-v2 .btn-hero-outline i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #fff; font-size: 9px; padding-left: 2px; } /* ========================================================================== 3. HOW-IT-WORKS STRIP (.hero-steps-strip > .steps-card) Overlaps the hero's lower edge. ========================================================================== */ body.tl-home-v2 .hero-steps-strip { position: relative; z-index: 3; margin-top: -78px; } body.tl-home-v2 .steps-card { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 8px; box-shadow: var(--tl-shadow); padding: 26px 10px; } body.tl-home-v2 .steps-card .step-item { display: flex; align-items: flex-start; gap: 16px; padding: 4px 26px; border-right: 1px solid var(--tl-line); } body.tl-home-v2 .steps-card .step-item:last-child { border-right: 0; } body.tl-home-v2 .steps-card .step-icon { flex: 0 0 auto; font-size: 26px; line-height: 1; color: var(--tl-orange); padding-top: 2px; } body.tl-home-v2 .steps-card .step-title { font-size: 16px; font-weight: 700; color: var(--tl-ink); margin: 0 0 4px; } body.tl-home-v2 .steps-card .step-text { font-size: 14px; line-height: 1.5; color: var(--tl-ink-soft); margin: 0; } /* ========================================================================== 4. CATEGORIES (.category-area_v2) ========================================================================== */ body.tl-home-v2 .category-area.category-area_v2 { background: #fff; padding-top: 70px; } body.tl-home-v2 .category-area_v2 .section-title .title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--tl-ink); margin-bottom: 14px; } /* short orange rule under the centered heading */ body.tl-home-v2 .category-area_v2 .section-title.title-center .title::after { content: ""; display: block; width: 62px; height: 3px; background: var(--tl-orange); border-radius: 2px; margin: 14px auto 0; } body.tl-home-v2 .category-card { border: 1px solid var(--tl-line); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow 0.25s ease, transform 0.25s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } body.tl-home-v2 .category-card:hover { box-shadow: var(--tl-shadow); transform: translateY(-3px); } body.tl-home-v2 .category-card_top { display: block; color: inherit; } body.tl-home-v2 .category-card_top:hover { color: inherit; } body.tl-home-v2 .category-card_img { aspect-ratio: 4 / 3; background: #fff; overflow: hidden; } body.tl-home-v2 .category-card_img img { width: 100%; height: 100%; object-fit: cover; display: block; } body.tl-home-v2 .category-card .card_content { padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 14px; } body.tl-home-v2 .category-card .card_title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--tl-ink); margin: 0 !important; min-height: 2.7em; display: flex; align-items: center; justify-content: center; } body.tl-home-v2 .category-card .btn-primary { background: var(--tl-orange); border-color: var(--tl-orange); color: #fff; font-weight: 600; font-size: 15px; padding: 11px 16px; } body.tl-home-v2 .category-card .btn-primary:hover { background: var(--tl-orange-dark); border-color: var(--tl-orange-dark); } /* ========================================================================== 5. VIDEO SECTION (.video-area_v2) Text left, clickable video thumbnail right, trust chips beneath. ========================================================================== */ body.tl-home-v2 .video-area.video-area_v2 { background: var(--tl-cream); padding: 60px 0; } body.tl-home-v2 .video-area_v2 .video-content .title { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; line-height: 1.25; color: var(--tl-ink); margin: 0 0 14px; } body.tl-home-v2 .video-area_v2 .video-content .title span { color: var(--tl-orange); } body.tl-home-v2 .video-area_v2 .video-content .text { font-size: 15px; line-height: 1.7; color: var(--tl-ink-soft); max-width: 340px; margin: 0; } /* handwritten-style "Play Video" cue with the curved arrow — sits at the right edge of the left column, pointing across at the thumbnail */ body.tl-home-v2 .video-play-cue { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 26px; font-size: 19px; font-weight: 500; font-style: italic; color: var(--tl-orange); } body.tl-home-v2 .video-play-cue svg { width: 44px; height: 22px; flex: 0 0 auto; color: var(--tl-orange); } /* --- thumbnail --------------------------------------------------------- */ body.tl-home-v2 .video-thumb { position: relative; display: block; aspect-ratio: 16 / 8; border-radius: 8px; overflow: hidden; background: var(--tl-line); box-shadow: var(--tl-shadow); } body.tl-home-v2 .video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } body.tl-home-v2 .video-thumb:hover img { transform: scale(1.03); } body.tl-home-v2 .video-thumb .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: var(--tl-orange); color: #fff; font-size: 20px; padding-left: 4px; box-shadow: 0 6px 22px rgba(31, 34, 38, 0.28); transition: transform 0.25s ease, background 0.25s ease; } body.tl-home-v2 .video-thumb:hover .play-btn { background: var(--tl-orange-dark); transform: translate(-50%, -50%) scale(1.07); } /* --- trust chips --------------------------------------------------------- */ body.tl-home-v2 .video-trust-list { display: flex; justify-content: center; gap: 46px; margin: 18px 0 0; padding: 0; list-style: none; } body.tl-home-v2 .video-trust-list li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--tl-ink-soft); } body.tl-home-v2 .video-trust-list i { font-size: 15px; color: var(--tl-orange); } /* ========================================================================== 6. FOOTER (.footer-area) ========================================================================== */ .footer-area { background: var(--tl-dark); color: #fff; } .footer-area .footer-top { padding-top: 60px; padding-bottom: 30px; } .footer-area .footer-widget .logo img { height: 60px; width: auto; } /* text wordmark fallback if you'd rather not use the image mark */ .footer-area .footer-widget .footer-brand-text { font-size: 20px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tl-orange); margin-bottom: 14px; } .footer-area .footer-widget .title { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tl-orange); margin-bottom: 18px; } .footer-area .footer-about-text { font-size: 14px; line-height: 1.7; color: #fff; max-width: 260px; } .footer-area .footer-links { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; } .footer-area .footer-links a { font-size: 14px; color: #fff; transition: color 0.2s ease; } .footer-area .footer-links a:hover { color: var(--tl-orange); } .footer-area .social-link { display: flex; gap: 10px; } .footer-area .social-link a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; transition: background 0.2s ease; } .footer-area .social-link a:hover { background: var(--tl-orange); } /* --- newsletter -------------------------------------------------------- */ .footer-area .subscription-form .input-inline { display: flex; align-items: center; gap: 6px; background: #fff; border-radius: var(--tl-radius) !important; padding: 5px !important; } .footer-area .subscription-form .form-control { border: 0; box-shadow: none; height: 40px; font-size: 14px; background: transparent; color: var(--tl-ink); } .footer-area .subscription-form .btn-primary { background: var(--tl-orange); border-color: var(--tl-orange); border-radius: var(--tl-radius) !important; font-weight: 600; font-size: 14px; padding: 10px 20px; white-space: nowrap; } .footer-area .subscription-form .btn-primary:hover { background: var(--tl-orange-dark); border-color: var(--tl-orange-dark); } /* --- bottom bar -------------------------------------------------------- */ .footer-area .copy-right-area { border-top: 1px solid rgba(255, 255, 255, 0.1); background: #1c1f22; } .footer-area .copy-right-content.footer-bottom-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: #fff; } .footer-area .copy-right-content.footer-bottom-bar .copy-right-text{ flex: 1; text-align: left; } .footer-area .copy-right-content.footer-bottom-bar .policy-pages{ flex: 1; display: flex; gap: 30px; justify-content: end; } .footer-area .footer-terms-links { display: flex; align-items: center; gap: 14px; } .footer-area .footer-terms-links a { font-size: 13px; color: #fff; } .footer-area .footer-terms-links a:hover { color: var(--tl-orange); } .footer-area .footer-terms-links span { color: rgba(255, 255, 255, 0.25); } .footer-area .footer-locale { display: flex; align-items: center; gap: 7px; font-size: 13px; } .footer-area .footer-locale i { color: var(--tl-orange); } /* ========================================================================== 7. RESPONSIVE ========================================================================== */ @media (max-width: 1199px) { .header-area.header_v5 .main-navbar .navbar { gap: 20px; } .header-area.header_v5 .more-option .navbar-nav { gap: 18px; } body.tl-home-v2 .steps-card .step-item { padding: 4px 18px; } } @media (max-width: 991px) { /* swap desktop nav for the mobile bar */ .header-area.header_v5 .main-navbar { display: none; } .main-responsive-nav { display: block; } body.tl-home-v2 .hero-banner.hero-banner_v7 { min-height: 0; padding: 56px 0 110px; background-image: var(--hero-bg-mobile, var(--hero-bg-desktop)); background-position: center right -80px; } body.tl-home-v2 .hero-banner_v7 .overlay { background: linear-gradient( 100deg, rgba(20, 22, 26, 0.78) 0%, rgba(20, 22, 26, 0.68) 45%, rgba(20, 22, 26, 0.35) 100% ); } body.tl-home-v2 .hero-cta-group { flex-direction: column; align-items: flex-start; gap: 10px; } body.tl-home-v2 .hero-cta-group .btn, body.tl-home-v2 .btn-hero-outline { width: 100%; max-width: 200px; justify-content: center; } /* smaller hero buttons so they fit comfortably on mobile */ body.tl-home-v2 .hero-cta-group .btn-primary { font-size: 14px; padding: 11px 22px; } body.tl-home-v2 .btn-hero-outline { font-size: 14px; padding: 11px 20px; gap: 10px; } body.tl-home-v2 .btn-hero-outline i { width: 18px; height: 18px; font-size: 8px; } body.tl-home-v2 .steps-card { grid-template-columns: 1fr; padding: 18px 6px; } body.tl-home-v2 .steps-card .step-item { border-right: 0; border-bottom: 1px solid var(--tl-line); padding: 14px 18px; } body.tl-home-v2 .steps-card .step-item:last-child { border-bottom: 0; } body.tl-home-v2 .video-area.video-area_v2 { padding: 46px 0; text-align: center; } body.tl-home-v2 .video-area_v2 .video-content .text { max-width: none; margin: 0 auto; } body.tl-home-v2 .video-play-cue { display: none; } body.tl-home-v2 .video-thumb { margin-top: 26px; } body.tl-home-v2 .video-trust-list { gap: 28px; } .footer-area .footer-about-text { max-width: none; } /* 18px gap between the two columns, instead of Bootstrap's default 1.5rem --bs-gutter-x (which pads each column 0.75rem/side). */ body.tl-home-v2 .category-grid { --bs-gutter-x: 18px; } /* compact, button-less category cards — whole image+title is the link */ body.tl-home-v2 .category-card { padding: 14px; border-radius: 8px; border: none; background-color: #fff; border: 1px solid #eee; border-radius: 6px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08); } body.tl-home-v2 .category-card_img { aspect-ratio: 1 / 1; border-radius: 8px; margin-bottom: 12px; } body.tl-home-v2 .category-card_img img { object-fit: cover; padding: 0; border-radius: 8px; } body.tl-home-v2 .category-card .card_title { font-size: 14px; min-height: 0; } body.tl-home-v2 .category-card .card_content { display: none; } } @media (max-width: 575px) { .footer-area .copy-right-content.footer-bottom-bar { flex-direction: column; align-items: flex-start; gap: 10px; } .footer-area .footer-terms-links a, .footer-area .footer-locale, .footer-area .copy-right-content.footer-bottom-bar{ font-size: 10px; } }